Ticket #4333 (closed bug: fixed)

Opened 5 years ago

Last modified 3 months ago

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:
Blocking: Blocked by:

Description (last modified by scott.gonzalez) (diff)

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

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

Change History

comment:1 Changed 5 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 5 years ago by rdworth

  • Milestone changed from 1.7.1 to 1.8

Changed 5 years ago by bartaz

comment:3 Changed 5 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 5 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 5 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 5 years ago by aembler

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

comment:7 follow-up: ↓ 8 Changed 5 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 5 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 5 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 follow-up: ↓ 34 Changed 5 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 5 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 5 years ago by lindner@…

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

comment:13 Changed 5 years ago by scott.gonzalez

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

comment:14 Changed 5 years ago by scott.gonzalez

  • Priority changed from major to critical

comment:15 Changed 5 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 5 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 ; follow-up: ↓ 21 Changed 5 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 ; follow-up: ↓ 22 Changed 5 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 5 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 5 years ago by scott.gonzalez

  • Description modified (diff)

comment:24 follow-up: ↓ 25 Changed 4 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 ; follow-up: ↓ 26 Changed 4 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 4 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 4 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 follow-up: ↓ 29 Changed 4 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 4 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 4 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 follow-up: ↓ 32 Changed 4 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 4 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 4 years ago by cstdenis

This also affects a resizable in a draggable in IE8.

comment:34 in reply to: ↑ 10 Changed 4 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 4 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 4 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 4 years ago by dallaway

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

comment:39 follow-up: ↓ 49 Changed 4 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 4 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 4 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 4 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 4 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 4 years ago by scott.gonzalez

  • Priority changed from critical to major

comment:45 Changed 4 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 3 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 3 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 3 years ago by markchagers (previous) (diff)

comment:48 Changed 3 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 3 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 3 years ago by larsomat (previous) (diff)

comment:50 Changed 3 years ago by scott.gonzalez

#7066 is a duplicate of this ticket.

comment:51 Changed 3 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 3 years ago by Scott González

  • Status changed from new to closed
  • Resolution set to fixed

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 3 years ago by kborchers

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 3 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.13

comment:53 Changed 3 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 3 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 3 years ago by scott.gonzalez

  • Status changed from closed to reopened
  • Resolution fixed deleted
  • Milestone changed from 1.8.13 to 1.9

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

  • Status changed from reopened to closed
  • Resolution set to fixed

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 3 years ago by kborchers

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 3 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.16

comment:59 Changed 3 months 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.