Opened 15 years ago

Closed 12 years ago

Last modified 10 years ago

#4333 closed bug (fixed)

Nested draggables problem in IE

Reported by: mitjakuscer Owned by:
Priority: major Milestone: 1.8.16
Component: ui.draggable Version: 1.7
Keywords: ie Cc:
Blocked by: Blocking:

Description (last modified by Scott González)

There's a problem with nested draggables in 1.7 (and also all 1.6RCs) in IE.

The bug was not present in 1.5.3

I have provided a full demo:

http://www.1ka.si/admin/survey/draggable_1.5.3.php (works everywhere)

http://www.1ka.si/admin/survey/draggable_1.7.php (doesn't work in IE)

If you drag Container 1.1 or 1.2, IE will also drag Container 1


Related tickets:
#3962
#4358
#4756

Attachments (1)

nested.draggables.html (979 bytes) - added by bartaz 15 years ago.

Download all attachments as: .zip

Change History (59)

comment:1 Changed 15 years ago by Grismar

I think I saw this problem being spotted in an earlier bug reported on the last RC for 1.6, but I'm unable to find this (older) ticket now.

It also affects controls like slider on draggables, so it seems that there is no typical workaround either.

comment:2 Changed 15 years ago by rdworth

Milestone: 1.7.11.8

Changed 15 years ago by bartaz

Attachment: nested.draggables.html added

comment:3 Changed 15 years ago by bartaz

Attached a simple test case with nested draggable list items.

This seems to be duplicated by #4358 (same problem with nested sortables).

comment:4 Changed 15 years ago by cdeszaq

This seems to be similar to #3962, which is marked as fixed. If that is the cause, then it should be reopened.

comment:5 Changed 14 years ago by damion

For the record, I have also run into exactly this same problem with jquery-ui-1.7.1.custom and my IE 7.0.5730. Similar code works fine in Firefox.

comment:6 Changed 14 years ago by aembler

This is the case in Internet Explorer 8, as well.

comment:7 Changed 14 years ago by eric_b

Well, i needed this to work for a project i was dealing with, so I took a look at the ui.core (v1.7.1). Quick kludge fixed the errant behavior in my case, but I won't guarantee that it won't have side-effects.

Added:

if( $.browser.msie) window.event.cancelBubble=true;

before line 378 where the mousedown event is bound. For better or worse, IE no longer propagates the event.

comment:8 in reply to:  7 Changed 14 years ago by damion

Replying to eric_b: Thanks so much for diving in to find a possible solution since it is important for a project I have too. What I could use now is a jQuery developer judgement about whether this solution sounds like it would work in general and would therefore be the direction that jQuery 1.8 would go in?

comment:9 Changed 14 years ago by superboer12

I also ran into this problem. Unfortunately the solution of eric_b has some side effects. Whenever the outher div is draggable but the inner div is not, the event will not be bubbled to the outer div and thus can't be dragged.

I solved my problem (not generic, but maybe usefull for others) by cancelling the bubbling on specific the inner div itself.

$(innerDiv).mousedown(function(e) {
    if($.browser.msie) {
         e.stopPropagation();
    }
});

comment:10 Changed 14 years ago by TitAn

I'm solved this problem by changing _mouseCapture function in draggable widget:

	_mouseCapture: function(event) {

		var o = this.options;

		if (this.helper || o.disabled || $(event.target).is('.ui-resizable-handle'))
			return false;

		//Quit if we're not on a valid handle
		this.handle = this._getHandle(event);
		if (!this.handle)
			return false;

		/*change by Titkov Anton : bug #4333 (http://dev.jqueryui.com/ticket/4333)*/
		if ($.browser.msie) event.stopPropagation();
		/*change by Titkov Anton*/
		
		return true;

	},
 

I think, bug fix must be in ui.draggable (not in ui.core as if( $.browser.msie) window.event.cancelBubble=true;) because it situation concerns only draggable objects. In other cases mousedown event must propagation on each of subscribed for this event objects. sorry for my bad english:)

comment:11 Changed 14 years ago by pwoldberg

I had a problem with nested sortables, seems to be the same problem as the nested draggables. So I think the bug must be fixed in the ui.core, since it is not specific for the draggable.

added to the _mouseDown function in ui.code:

if ($.browser.msie) event.stopPropagation();

that fixed my sortables.

comment:12 Changed 14 years ago by lindner@…

Thanks TitAn! Your hack solves the problem for my application.

comment:13 Changed 14 years ago by Scott González

#4358 was closed as a duplicate (for sortable).

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

Priority: majorcritical

comment:15 Changed 14 years ago by mryall

If you want to apply Titan's patch to work around this issue, but don't want to modify jQuery UI directly, you can add the following to your own script before calling $.draggable():

$.extend($.ui.draggable.prototype, (function (orig) {
  return {
    _mouseCapture: function (event) {
      var result = orig.call(this, event);
      if (result && $.browser.msie) event.stopPropagation();
      return result;
    }
  };
})($.ui.draggable.prototype["_mouseCapture"]));

comment:18 Changed 14 years ago by oribani

Dunno what sunrise1 is talking about -- I still have this issue with 1.7.2 in IE 8 at least (works flawlessly in FF). I am using nested sortables and the changes suggested above don't fix the problem for me one bit. Any further tips or suggestions would be highly appreciated.

comment:20 in reply to:  19 ; Changed 14 years ago by andri

Replying to TitAn:

Fix for that bug http://elsoft.tomsk.ru/jQuery/ui/Nested_draggables_problem_in_IE.html

This demo does not work on Firefox 3.5.3 at all.

comment:21 in reply to:  20 ; Changed 14 years ago by TitAn

Replying to andri:

Replying to TitAn:

Fix for that bug http://elsoft.tomsk.ru/jQuery/ui/Nested_draggables_problem_in_IE.html

This demo does not work on Firefox 3.5.3 at all.

In a Firefox 3.5.3 it's works perfectly on my computer. How this demo works for you?
demo from ticket header with fix:
http://elsoft.tomsk.ru/jQuery/ui/Nested_draggables_problem_in_IE1.html

comment:22 in reply to:  21 Changed 14 years ago by andri

Replying to TitAn:

Replying to andri:

Replying to TitAn:

Fix for that bug http://elsoft.tomsk.ru/jQuery/ui/Nested_draggables_problem_in_IE.html

This demo does not work on Firefox 3.5.3 at all.

In a Firefox 3.5.3 it's works perfectly on my computer. How this demo works for you?
demo from ticket header with fix:
http://elsoft.tomsk.ru/jQuery/ui/Nested_draggables_problem_in_IE1.html

Forgive me. I assumed we were dealing with a sortable, but I see this bug is only about dragging, which both the demos you made seem to do correct. The only difference I can see is that one resets and the other not.

comment:23 Changed 14 years ago by Scott González

Description: modified (diff)

comment:24 Changed 14 years ago by m4olivei

Hi,

I am having this same issue in my application, with a slight twist. I also have nested draggables that were both dragging when you drag the child. Applying TitAn's fix fixed the draggable issue, however my draggables are accepted by droppables and when you drop them, there is an error in IE on line 587 of ui.draggable.js:

Microsoft JScript runtime error: 'data(...).options' is null or not an object

Anyone have an idea what could cause this?

Thanks, ~Matt

comment:25 in reply to:  24 ; Changed 14 years ago by m4olivei

Replying to m4olivei:

Hi,

I am having this same issue in my application, with a slight twist. I also have nested draggables that were both dragging when you drag the child. Applying TitAn's fix fixed the draggable issue, however my draggables are accepted by droppables and when you drop them, there is an error in IE on line 587 of ui.draggable.js:

Microsoft JScript runtime error: 'data(...).options' is null or not an object

Anyone have an idea what could cause this?

Thanks, ~Matt

Forgot to mention, I am using jQuery UI 1.7 (tried upgrading to 1.7.2 and it didn't help, so just went back to 1.7).

comment:26 in reply to:  25 Changed 14 years ago by m4olivei

Replying to m4olivei:

Replying to m4olivei:

Hi,

I am having this same issue in my application, with a slight twist. I also have nested draggables that were both dragging when you drag the child. Applying TitAn's fix fixed the draggable issue, however my draggables are accepted by droppables and when you drop them, there is an error in IE on line 587 of ui.draggable.js:

Microsoft JScript runtime error: 'data(...).options' is null or not an object

Anyone have an idea what could cause this?

Thanks, ~Matt

Forgot to mention, I am using jQuery UI 1.7 (tried upgrading to 1.7.2 and it didn't help, so just went back to 1.7).

As it turns out the second issue that cropped up for me was reported in ticket #4550 and a fix suggested in one of the comments worked for me. So for now I'm good!

Hopefully this will be resolved in the next version.

Thanks, ~Matt

comment:27 Changed 14 years ago by TitAn

I wish to remind that such decision wrong.

if ($.browser.msie) event.stopPropagation();

It can provoke other errors.
It is necessary to use this decision of a problem:

$.ui.mouse = {
...
	_mouseDown: function(event) {
		// don't let more than one widget handle mouseStart
		if ($(event).data("mouseHandled")) return;
...
		$(event).data("mouseHandled", true);

		return true;
	},

	_mouseUp: function(event) {
...
		$(event).data("mouseHandled", false);

		return false;
	},
...
}

Demo:
http://elsoft.tomsk.ru/jQuery/ui/Nested_draggables_problem_in_IE.html

comment:28 Changed 14 years ago by Lockhead

this bug is still present in 1.8rc3 and JQuery 1.4.2

I tried to solve it with the "fix" provided by TitAn but couldn't get it to work...

Any ideas?

Shouldn't it be marked as blocker for 1.8?

comment:29 in reply to:  28 Changed 14 years ago by Lockhead

Replying to Lockhead:

this bug is still present in 1.8rc3 and JQuery 1.4.2

I tried to solve it with the "fix" provided by TitAn but couldn't get it to work...

Any ideas?

Shouldn't it be marked as blocker for 1.8?

Sorry, I should have seen that it is already marked as blocker :(

comment:30 Changed 14 years ago by Lockhead

Oh. That was easy. After looking at the 1.5.3 code the fix was easy to find...

in jquery.ui.mouse.js change the following: for the _mouseDown event, the last "return" should be a 'return false' instead of 'return true' (line 95)

comment:31 Changed 14 years ago by Lockhead

now I have the problem, that the inner draggable is not visible after dragging it out of the outer draggable, but it can be dropped.

comment:32 in reply to:  31 Changed 14 years ago by Lockhead

Replying to Lockhead:

now I have the problem, that the inner draggable is not visible after dragging it out of the outer draggable, but it can be dropped.

you need to drag the outer draggable for this problem to appear

comment:33 Changed 13 years ago by cstdenis

This also affects a resizable in a draggable in IE8.

comment:34 in reply to:  10 Changed 13 years ago by mike3050

Replying to TitAn:

I'm solved this problem by changing _mouseCapture function in draggable widget:

	_mouseCapture: function(event) {

		var o = this.options;

		if (this.helper || o.disabled || $(event.target).is('.ui-resizable-handle'))
			return false;

		//Quit if we're not on a valid handle
		this.handle = this._getHandle(event);
		if (!this.handle)
			return false;

		/*change by Titkov Anton : bug #4333 (http://dev.jqueryui.com/ticket/4333)*/
		if ($.browser.msie) event.stopPropagation();
		/*change by Titkov Anton*/
		
		return true;

	},
 

I think, bug fix must be in ui.draggable (not in ui.core as if( $.browser.msie) window.event.cancelBubble=true;) because it situation concerns only auto insurance quotes draggable objects. In other cases mousedown event must propagation on each of subscribed for this event objects. sorry for my bad english:)

You English are ok. Thanks for the help.

comment:35 Changed 13 years ago by hammond13

I thought I'd offer up a workaround that worked for me. I'm using nested lists with sortable. The top level list has the groups class, and the nested lists have the people class. I just added this:

$(".people li").hover(function(){
	$(".groups").sortable("option", "disabled", true);
},function(){
	$(".groups").sortable("option", "disabled", false);
});

comment:36 Changed 13 years ago by freerange

I've got 2 levels of sub list and was pulling my hair out. I tried using the mousedown event to dynamically initialize the sortable on the current ul. Just add $(this).sortable('destroy') to the update option and it seems to work:

	$("#list-1").mousedown(function(event){
		$(this).sortable({
			update : function () {
				$(this).sortable('destroy');
			}
	    });
		
		


	});

comment:38 Changed 13 years ago by dallaway

hi, does anyone know if this will be fixed in a jquery release anytime soon? Thanks

comment:39 Changed 13 years ago by adamlogic

Here is yet another potential solution. It's working for us, but I also haven't tried the other solutions proposed in this thread.

http://github.com/adamlogic/jquery-ui/commit/ec7968b8ca1040e27f4479c03d7582c651f012e7

comment:40 Changed 13 years ago by dalelarsen

I am also getting an issue similar to these but none of the above solutions fix it. I have put together a very simple simulation. I just have a sortable block where its items are resizable. In IE when you resize the sortables, it drags them to sort as it resizes them.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function(){
   $('div.sorterClass').resizable();
   $('#willSort').sortable({
      axis: 'y',
      items: '.sorter'
   }).disableSelection();
});
</script>
<style type="text/css">
.sorterClass {width: 600px; height: 60px; position: relative; background-color: #999; margin: 10px; padding: 10px 0px; color: #fff; font-family: Arial; font-weight: bold; font-size: 23px;}
</style>
<div id="willSort">
<div class="sorterClass sorter">1</div>
<div class="sorterClass sorter">2</div>
<div class="sorterClass sorter">3</div>
<div class="sorterClass sorter">4</div>
<div class="sorterClass sorter">5</div>
</div>

comment:41 Changed 13 years ago by rb-cohen

Got the same problem, couldn't find another way to subscribe to changes other than to add my 2 cents?!

comment:42 Changed 13 years ago by EricKerby

I also have this problem...and I can confirm that the stopPropagation fix works for me (testing with IE 8 and jQuery UI 1.8.4). I was using the minified version of jQuery UI, so I added the IE stopPropagation call to the beginning of the the _mouseDown function in the jQuery UI Mouse section to make it look like:

_mouseDown:function(a){if ($.browser.msie) a.stopPropagation();a.originalEvent=a.originalEvent||{};if(!a.origi...[clipped]

comment:43 in reply to:  37 Changed 13 years ago by mike3050

Replying to mikeqw:

Replying to mike3050:

Replying to TitAn:

I'm solved this problem by changing _mouseCapture function in draggable widget:

	_mouseCapture: function(event) {

		var o = this.options;

		if (this.helper || o.disabled || $(event.target).is('.ui-resizable-handle'))
			return false;

		//Quit if we're not on a valid handle
		this.handle = this._getHandle(event);
		if (!this.handle)
			return false;

		/*change by Titkov Anton : bug #4333 (http://dev.jqueryui.com/ticket/4333)*/
		if ($.browser.msie) event.stopPropagation();
		/*change by Titkov Anton*/
		
		return true;

	},
 

I think, bug fix must be in ui.draggable (not in ui.core as if( $.browser.msie) window.event.cancelBubble=true;) because it situation concerns only draggable objects. In other auto insurance quotes cases mousedown event must propagation on each of subscribed for this event objects. sorry for my bad english:)

You English are ok.

Thanks for the help.

How did i helped you?

comment:44 Changed 13 years ago by Scott González

Priority: criticalmajor

comment:45 Changed 13 years ago by vitch

I've just run into this bug and I'm amazed to see it still in existence, 20 months after it was reported. It seems to me to be a fairly fundamental flaw. With the current state of draggables, it is impossible to use it to create a re-arrangable tree with nested items which works in IE!

In the hope of speeding up a solution (or verifying that one of the solutions given above works reliably) I cloned the UI repository and tried to write a unit test for this but I ran into two problems:

  • The testsuite for draggables is stale (see the failing tests and the comment in the sourcecode " disable this stale testsuite for testswarm only"). So even if I write a test for this I don't have a passing test suite to compare against to guarantee that nothing else has been broken.
  • I'm not sure if $.simulate behaves identically to the mouse in this situation (especially with regards to bubbling). I wrote a test that appears to pass in IE but I can easily verify that the behaviour is incorrect in IE.

For a very simple visual demonstration of the problem occurring with latest jQuery and jQuery UI see this very simple example: http://www.kelvinluck.com/assets/jquery/bugs/issue_4333.html

In IE if you drag "Item 1.1" then "Item 1" also moves. In other browsers the behaviour is correct...

comment:46 Changed 13 years ago by geoffp

TitAN's patch to jQuery UI works perfectly for me. I have not exhaustively tested for side effects, but there don't appear to be any in my use case.

comment:47 Changed 13 years ago by markchagers

I'm running into this very issue with 1.8.9 and it's a MAJOR showstopper.

I have a list of items that can be up to 3 levels deep. The user can drag items around to reorder them.
Works fine in FireFox, Chrome, Safari and IE 9 beta.

In IE8 when dragging a nested list item, the parent item(s) is (are) dragged simultaniously, causing the nested item to be moved twice or three times the dragging distance (depending on nesting depth of the dragged item).

Update: Fortunately the fix by TitAn works for me too. Makes me wonder why this hasn't been incorporated in the release yet.
I apply it using the patch mechanism suggested by oribami, but I moved the browser check to surround the patch itself: That way the patch is only applied when necessary, and it saves a check on every mouseCapture event. like so: http://pastie.org/1544721

Last edited 13 years ago by markchagers (previous) (diff)

comment:48 Changed 13 years ago by pospi

A realiable workaround for now seems to be achievable with the following:

  • Stop the mousedown event handler on the elements you are using as draggables. This will prevent the dragStart event from being called repetitively. The browser check is still necessary as this behaviour seems to affect Webkit quite severely if enabled.
  • If combining draggables with droppables, ensure your draggables and droppables are active on different DOM elements. You might think this defeats the entire purpose, but it actually seems to work quite well with markup similar to the following:
    <ul id="container">
    	<li>				<-- draggable
    		<div>Item 1</div>	<-- droppable
    		<ul>
    			<li>...</li>
    			<li>...</li>
    			...
    		</ul>
    	</li>
    	<li>...</li>
    </ul>
    
var nodes = $('#container').find('li');
nodes.draggable({
	/* your options */
}).mousedown(function(e) {
	if ($.browser.msie) {
		return false;
	}
}).find('>div').droppable({
	greedy: true,
	/* other options */
});

comment:49 in reply to:  39 Changed 13 years ago by larsomat

Replying to adamlogic:

Here is yet another potential solution. It's working for us, but I also haven't tried the other solutions proposed in this thread.

http://github.com/adamlogic/jquery-ui/commit/ec7968b8ca1040e27f4479c03d7582c651f012e7

Thanks, this is the solution that worked for me.

Last edited 13 years ago by larsomat (previous) (diff)

comment:50 Changed 13 years ago by Scott González

#7066 is a duplicate of this ticket.

comment:51 Changed 12 years ago by k_borchers

I have sent a pull request at https://github.com/jquery/jquery-ui/pull/227 which implements TitAn's solution.

Thanks

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

Resolution: fixed
Status: newclosed

Merge pull request #235 from kborchers/bug_4333_2

Mouse: Changed mouseHandled check to a local var rather than using originalEvent. Fixed #4333 - Nested draggables problem in IE

Changeset: f1180e5341aac31349877de3207fb7da558985fa

comment:51 Changed 12 years ago by Kris Borchers

Mouse: Changed mouseHandled check to a local var rather than using originalEvent. Fixed #4333 - Nested draggables problem in IE (cherry picked from commit 9c50bdfde0260fc8412eec1c5020ed6b61558ebd)

Changeset: 7eda94a8c916760de4093df85f58cc694838b52b

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

Milestone: 1.91.8.13

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

Revert "Mouse: Changed mouseHandled check to a local var rather than using originalEvent. Fixed #4333 - Nested draggables problem in IE"

This reverts commit 9c50bdfde0260fc8412eec1c5020ed6b61558ebd.

Changeset: 350e4ab5b854d2f6aca22d5202c03dcbf59ff4aa

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

Revert "Mouse: Changed mouseHandled check to a local var rather than using originalEvent. Fixed #4333 - Nested draggables problem in IE"

This reverts commit 7eda94a8c916760de4093df85f58cc694838b52b.

Changeset: bd48ddfa94ff673cc5dfef749fe0565f1bc02d0f

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

Milestone: 1.8.131.9
Resolution: fixed
Status: closedreopened

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

Resolution: fixed
Status: reopenedclosed

Merge pull request #413 from kborchers/bug_4333_3

Mouse: Changed mouseHandled check to a local var rather than using originalEvent. Fixed #4333 - Nested draggables problem in IE

Changeset: e15c32d06763afd2376c61642397e7fc98338958

comment:57 Changed 12 years ago by Kris Borchers

Mouse: Changed mouseHandled check to a local var rather than using originalEvent. Fixed #4333 - Nested draggables problem in IE (cherry picked from commit dafc941b3632bb79823a72c36bfae7f1f985ca25)

Changeset: 14ab4f4f374ddda1eaa552072e6e3a86a91db4bd

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

Milestone: 1.91.8.16

comment:59 Changed 10 years ago by nealshan

I found this code in Jquery-UI 1.8.6 I add this "&& !(document.documentMode >= 9)" to my 1.8.2 it works perfect, the sortable function

IE mouseup check - mouseup happened when mouse was out of window

if ($.browser.msie && !(document.documentMode >= 9) && !event.button) {

return this._mouseUp(event);

}

Note: See TracTickets for help on using tickets.