#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 )
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
Attachments (1)
Change History (59)
comment:1 Changed 15 years ago by
comment:2 Changed 15 years ago by
Milestone: | 1.7.1 → 1.8 |
---|
Changed 15 years ago by
Attachment: | nested.draggables.html added |
---|
comment:3 Changed 15 years ago by
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
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
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:7 follow-up: 8 Changed 14 years ago by
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 Changed 14 years ago by
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
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 14 years ago by
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
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:14 Changed 14 years ago by
Priority: | major → critical |
---|
comment:15 Changed 14 years ago by
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
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:19 follow-up: 20 Changed 14 years ago by
comment:20 follow-up: 21 Changed 14 years ago by
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 follow-up: 22 Changed 14 years ago by
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 Changed 14 years ago by
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
Description: | modified (diff) |
---|
comment:24 follow-up: 25 Changed 14 years ago by
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 follow-up: 26 Changed 14 years ago by
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 Changed 14 years ago by
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
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 14 years ago by
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 Changed 14 years ago by
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
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 14 years ago by
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 Changed 14 years ago by
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:34 Changed 13 years ago by
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
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
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
hi, does anyone know if this will be fixed in a jquery release anytime soon? Thanks
comment:39 follow-up: 49 Changed 13 years ago by
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
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
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
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 Changed 13 years ago by
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
Priority: | critical → major |
---|
comment:45 Changed 13 years ago by
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
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
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
comment:48 Changed 13 years ago by
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 Changed 13 years ago by
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.
comment:51 Changed 12 years ago by
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
Resolution: | → fixed |
---|---|
Status: | new → closed |
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
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
Milestone: | 1.9 → 1.8.13 |
---|
comment:53 Changed 12 years ago by
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
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
Milestone: | 1.8.13 → 1.9 |
---|---|
Resolution: | fixed |
Status: | closed → reopened |
comment:56 Changed 12 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
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
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
Milestone: | 1.9 → 1.8.16 |
---|
comment:59 Changed 10 years ago by
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);
}
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.