Opened 7 years ago

Closed 5 years ago

#6962 closed bug (worksforme)

jQuery UI sortable doesn't sort when it's handle is outside the container element

Reported by: Maher4Ever Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.sortable Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:


Hello, I have a situation in which the sortable function stops working probably.

I have a dragging icon outside the dragged element, absolutely positioned. When I drag using this icon I get deferent behaviors across browsers.

In chrome, the placeholder appears and the div starts to "float", but the divs don't sort unless the cursor is inside the this div.

In FF the placeholder appears, the div starts to "float" and that's it. It just stays there until you release the dragging button.

I tried to minimize the code needed to produce this problem, here it is:

To know if it only happens with positions handles, I also tried to fix this by using floating and negative miraging to achieve the same layout, but that didn't help.

I hope this help you fix this problem.

Change History (6)

comment:1 Changed 7 years ago by Maher4Ever

Is there something wrong with my bug submission? I saw that the developers has fixed some newer bugs in the recent "Recent Changes", so I thought there might be a problem with mine.

comment:2 Changed 7 years ago by Scott González

Well, in general 2 days is an extremely fast turn-around time on a bug. However, there is something specific about this bug that will cause it to not get any attention: the fact that it's a bug for sortable. Sortable, along with all of the other interaction plugins, is going to be rewritten from scratch for the 2.0 release, so we are not actively fixing bugs (any newly reported bug is almost guaranteed to be a long standing issue as these plugins are almost never touched). We're not happy about this situation, and we're very committed to rectifying this problem with the 2.0 release. However, if someone provides a reasonable patch, we will review it and land it if it works.

comment:3 Changed 7 years ago by Maher4Ever

Thank you scott for your respond. After I knew that it might take a while for you guys to fix this, and scince I really need this to be fixed, I decided to dig deep into the source of sortable().

I found out that there is a problem calculating the '' inside ' _intersectsWithPointer()'.

I didn't have enough time to find out why it being mis-calculated, so I just used a static fix for my website. Here it is:

// jQuery UI sortable fixer - dirty and static fix for now
$.extend($['ui']['sortable'].prototype, {
	_intersectsWithPointer: function(item) {

		var isOverElementHeight = $.ui.isOverAxis( +,, item.height),
				isOverElementWidth = $.ui.isOverAxis(this.positionAbs.left + /* THIS IS THE FIX */ + 50 /* END FIX */, item.left, item.width),
				isOverElement = isOverElementHeight && isOverElementWidth,
				verticalDirection = this._getDragVerticalDirection(),
				horizontalDirection = this._getDragHorizontalDirection();

		if (!isOverElement)
				return false;

		return this.floating ?
				( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 )
				: ( verticalDirection && (verticalDirection == "down" ? 2 : 1) );


I updated my example to show that it fixes the problem in my situation, here is the link:

I know this fix doesn't handle the source of the problem, but I hope it helps you guys even a little fixing it.

comment:4 Changed 7 years ago by Scott González

This doesn't seem valid. If the handles are outside of the element, why are you using pointer intersection?

comment:5 Changed 5 years ago by Scott González


comment:6 Changed 5 years ago by mikesherov

Resolution: worksforme
Status: newclosed

Thanks for taking the time to contribute to the jQuery UI project! I can no longer reproduce the issue described.

If you can still reproduce it, please feel free to reply to this ticket with a test case showing the problem. Thanks!

Note: See TracTickets for help on using tickets.