Nested unconnected sortables fail in IE7 (IE6 not tested)

[tarjei]

The following testpage works well in Firefox and Opera but fails when testing in IE:

​http://kraken.no/juiproblem/edit.html It contains a list with nested lists in it. I want to to be able to sort between the top level items and between the second level items and move a second level item from one list to another.

The page above works perfectly in Firefox and Opera, but in IE I cannot sort the second level elements ("Sec 1" etc in the page).

When I start dragging the item, then the toplevel is also dragged so that I move the whole top list - which is not what I want.

I have tried fiddling with the z-index property, but that has not helped.

Also note that I had this markup doing what is should using Dojo 0.4.6.

[DarkSerg]

Nested Sortables Test

[DarkSerg]

Try my example in IE and Safari.

[DarkSerg]

IE7 and IE6 make problems. I think it is because of mouse events propagation.

[tarjei]

DarkSerg: "Try my example in IE and Safari. "

Did you mean that I should test the test.builder.1.7.html file in IE?

[bcg3082]

I'm experiencing the same issue. I also found bug #4333 with draggables that may be related.

[bartaz]

I found the same problem with nested sortables. It still happens in IE8.

I attached very simple test case with nested sortable lists.

[jz]

I have the same issue with nested sortable. It looks like the mouse events are getting propagated with IE.

[jz]

Test case for issue #4358

[jz]

Screenshot of the issue

[jz]

I took a look at the sortable code, it seems that the _mouseStart() method is called each time the mouse event is propagated to a parent sortable. (ie, if I I have a nested sortable like #sortable1 > #sortable2 > #sortable3, then _mouseStart is called for #sortable3, then #sortable2 and finally #sortable1).

Each call to _mouseStart create a difference placeholder which give the results from the screenshot:

In this example, I am my drag start in #subgroup1 and gets bubbled in #maingroup.

[jz]

I fixed the issue by adding a stopPropagation() in $.ui.mouse._mouseDown().

 	},
 
 	_mouseDown: function(event) {
+		if ($.browser.msie) {
+			event.stopPropagation();
+		};
+
 		// don't let more than one widget handle mouseStart
 		// TODO: figure out why we have to use originalEvent
 		event.originalEvent = event.originalEvent || {};

The issue was affecting ie6, 7 and 8. This fix works for all of them.

[mkowalski@…]

I confirm, the change above fixes the problem. Maybe consider adding it to production code ?

[Scott González]

Duplicate of #4333 (for draggable).