Opened 10 years ago

Closed 9 years ago

Last modified 8 years ago

#2436 closed feature (fixed)

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?


Change History (6)

comment:1 Changed 10 years ago by paul

Owner: changed from paul to jeffkretz

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() {}.

comment:2 Changed 10 years ago by jeffkretz

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.


comment:3 Changed 9 years ago by (none)

Milestone: 1.2.4

Milestone 1.2.4 deleted

comment:4 Changed 9 years ago by paul

Component: ui.coreui.droppable

comment:5 Changed 9 years ago by paul

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) { }

comment:6 Changed 9 years ago by paul

Milestone: 1.5.2
Note: See TracTickets for help on using tickets.