Hello, I've discovered what may be an issue with drag and drop when using IE. I'm working on an application where there are nested containers that can be rearranged using drag and drop. Often these containers are nested. This works perfectly on Firefox 3 and Safari 3.
The problem comes when I try to use the application in IE 6, 7, or 8. The behavior I'm seeing is that all of the nested elements are being dragged at once. Not only that, they're being dragged relative to each other, so it causes a very strange telescopic effect. I've put together a very simple example, which I've pasted below. I've done some experimenting, and I did find a way to stop this behavior. In jQuery.ui.draggable._mouseStart there is a line that that says "$.ui.ddmanager.current = this;". If I add a check in the same area to return if current is already assigned, it behaves as expected. I also had to uncomment a line in _clear that would clear out current if it was already set. I'm not sure this is the best fix, but it seems to work for me. It doesn't change the behavior on Firefox and Safari, but it does seem to address the issue. I'm not sure of the policy for code on the forum, but I've pasted a test case and a diff below. Thanks, Paul <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd"> <html> <head> <title>jQuery multiple drag test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/ jquery-ui.js"></script> <!-- <script src="/content/javascripts/jquery-ui-1.7.1.fix1.js"></ script> --> <style> div.outer { border: 1px solid; } div.container { border: 1px solid #AAAAFF; margin: .5em; } div.container > div.handle { background-color: #CCCCFF; padding: 5px; overflow: auto; } div.container > div.content { background-color: #E5E5FF; padding: 5px; } </style> <script> jQuery(document).ready(function() { jQuery.noConflict( ) jQuery('.container').draggable(); }); </script> </head> <body> <div class="outer"> <div class="container"> <div class="handle"> Container1 handle </div> <div class="content"> Content1 <div class="container"> <div class="handle"> Container1 handle </div> <div class="content"> Content1 </div> </div> </div> </div> </div> </body> --- jquery-ui-1.7.1.custom.js 2009-03-19 21:10:28.000000000 -0500 +++ jquery-ui-1.7.1.fix1.js 2009-05-04 20:25:58.000000000 -0500 @@ -583,8 +583,13 @@ this._cacheHelperProportions(); //If ddmanager is used for droppables, set the global draggable - if($.ui.ddmanager) - $.ui.ddmanager.current = this; + if($.ui.ddmanager) { + if ($.ui.ddmanager.current) + return false + else + $.ui.ddmanager.current = this; + } + /* * - Position generation - @@ -891,7 +896,7 @@ _clear: function() { this.helper.removeClass("ui-draggable-dragging"); if(this.helper[0] != this.element[0] && ! this.cancelHelperRemoval) this.helper.remove(); - //if($.ui.ddmanager) $.ui.ddmanager.current = null; + if($.ui.ddmanager) $.ui.ddmanager.current = null; this.helper = null; this.cancelHelperRemoval = false; }, --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
