Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#4358 closed bug (duplicate)

Nested unconnected sortables fail in IE7 (IE6 not tested)

Reported by: tarjei Owned by:
Priority: critical Milestone: 1.8
Component: ui.sortable Version: 1.7
Keywords: IE Cc:
Blocked by: Blocking:

Description

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.

Attachments (4)

test.builder.1.7.html (3.3 KB) - added by DarkSerg 11 years ago.
Nested Sortables Test
nested.sortables.html (978 bytes) - added by bartaz 11 years ago.
sortable-ie-bug.zip (59.2 KB) - added by jz 10 years ago.
Test case for issue #4358
ie-bug.png (21.3 KB) - added by jz 10 years ago.
Screenshot of the issue

Download all attachments as: .zip

Change History (16)

Changed 11 years ago by DarkSerg

Attachment: test.builder.1.7.html added

Nested Sortables Test

comment:1 Changed 11 years ago by DarkSerg

Try my example in IE and Safari.

comment:2 Changed 11 years ago by DarkSerg

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

comment:3 Changed 11 years ago by 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?

comment:4 Changed 11 years ago by bcg3082

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

Changed 11 years ago by bartaz

Attachment: nested.sortables.html added

comment:5 Changed 11 years ago by bartaz

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

I attached very simple test case with nested sortable lists.

comment:6 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD1.7.2

comment:7 Changed 10 years ago by Jörn Zaefferer

Milestone: 1.7.21.8

comment:8 Changed 10 years ago by jz

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

Changed 10 years ago by jz

Attachment: sortable-ie-bug.zip added

Test case for issue #4358

Changed 10 years ago by jz

Attachment: ie-bug.png added

Screenshot of the issue

comment:9 Changed 10 years ago by 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: http://dev.jqueryui.com/attachment/ticket/4358/ie-bug.png

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

comment:10 Changed 10 years ago by 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.

comment:11 Changed 10 years ago by mkowalski@…

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

comment:12 Changed 10 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #4333 (for draggable).

Note: See TracTickets for help on using tickets.