Nested draggables problem in IE

[mitjakuscer]

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

[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.

[bartaz]

Attached a simple test case with nested draggable list items.

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

[cdeszaq]

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

[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.

[aembler]

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

[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.

[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?

[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();
    }
});

[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:)

[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.

[[email protected]…]

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

[Scott González]

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

[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"]));

[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.

[TitAn]

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

[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.

[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

[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.

[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

[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).

[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

[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

[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?

[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 :(

[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)

[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.

[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

[cstdenis]

This also affects a resizable in a draggable in IE8.

[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.

[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);
});

[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');
			}
	    });
		
		


	});

[dallaway]

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

[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

[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>

[rb-cohen]

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

[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]

[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?

[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...

[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.

[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

[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 */
});

[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.

[Scott González]

#7066 is a duplicate of this ticket.

[k_borchers]

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

Thanks

[Scott González]

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

[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

[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

[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

[Scott González]

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

[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

[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);

}