Skip to main content

Search and Top Navigation

#2436 closed feature (fixed)

Opened February 29, 2008 05:20PM UTC

Closed July 04, 2008 05:59PM UTC

Last modified January 17, 2010 06:09AM UTC

Add an event to the droppable system.

Reported by: jeffkretz Owned by: jeffkretz
Priority: major Milestone: 1.5.2
Component: ui.droppable Version: 1.5b4
Keywords: Droppable Event Cc:
Blocked by: Blocking:

I needed to implement a somewhat complex intersection logic. The drop zone elements were hidden until active (display:none), only one could be active at a time, etc. etc.

Rather than trying to accommodate a bunch of odd droppable situations like mine, what if an event were added during the intersect function. That way intersection logic could be applied by the user for unusual circumstances.

Something like this:

// Get the drop position.
var pos = { l : droppable.offset.left, r : l + droppable.item.proportions.width, 
            t :,  b : t + droppable.item.proportions.height };

// If a custom onposition function is defined, fire it.  If that function returns false, we will not activate this droppable.
if ($.isFunction(droppable.item.options.onposition) &&,draggable,droppable,pos) == false)
    return false;

// Assign the droppable position.
var l = pos.l, r = pos.r, t = pos.t, b = pos.b;

The event is "onposition". If nothing were defined in the options, the calculations would go ahead as usual. If the onposition event were defined, the users's code could modify the droppable top/right/bottom/left as appropriate.

Optionally, if that event returned "false", this means that the drop zone cannot be activated even if it would otherwise intersect. I used this to only allow one active drop zone at a time, even if the draggable intersected two drop zones simultaneously.

What do you think?


Attachments (0)
Change History (6)

Changed March 05, 2008 01:20PM UTC by paul comment:1

owner: pauljeffkretz

I don't really understand the purpose - wouldn't tolerance: 'touch' solve your problem?

The only thing I think we could to is to allow the replacement of the intersect method, so you can have an option like positionCheck: function() {}.

Changed March 14, 2008 01:33AM UTC by jeffkretz comment:2

Sorry, I missed this question until now.

The problem I was trying to solve was a specific (and possibly unusual) one. I was doing a drag-and-drop page manager for a CMS, and I wanted the drop zone to show/hide as the draggable element moved over it. The idea was to give the user a real-time preview of what the page would look like if it were dropped at that location.

Here is a vignette of this operation in action:

(Be kind, its not actually finished yet and is only partially functional).

Anyway, because the drop zones are hidden they can never be property intersected.

I like your idea of being able to replace the intersect method with a custom one (the positionCheck option), that's much less complex than my original idea.


Changed May 24, 2008 03:39AM UTC by comment:3

milestone: 1.2.4

Milestone 1.2.4 deleted

Changed May 24, 2008 07:11PM UTC by paul comment:4

component: ui.coreui.droppable

Changed July 04, 2008 05:59PM UTC by paul comment:5

resolution: → fixed
status: newclosed

The intersect method can now be very easily replaced, because it's a single exposed method in the file ui.droppable.js.

Just overwrite the following:

$.ui.intersect = function(draggable, droppable, tolerance) { }

Changed July 04, 2008 05:59PM UTC by paul comment:6

milestone: → 1.5.2