Skip to main content

Bug Tracker

Side navigation

#2436 closed feature (invalid)

Opened February 29, 2008 05:20PM UTC

Closed July 11, 2010 06:37PM UTC

Add an event to the droppable system.

Reported by: jeffkretz Owned by: jeffkretz
Priority: major Milestone: 1.2.4
Component: ui Version: 1.2.3
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 (3)

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 July 11, 2010 06:37PM UTC by dmethvin comment:3

resolution: → invalid
status: newclosed

This should be filed in the UI bug tracker if still relevant.