shangl Posted July 30, 2009 Share Posted July 30, 2009 hi, i have 2 problems with the drag and drop functionality of jquery: problem 1: i have div's nested in other div's. all div's (even the subdiv's) should be draggable by their own. it works perfekt in firefox and chrome but not in internet explorer. here is the code to test it (to see the problem, just try to drag "sub21" in internet explorer): <!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.droppable.js"></script> <style type="text/css"> #draggable { width: 100px; height: 70px; background: silver; } #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; } </style> <script type="text/javascript"> $(document).ready(function(){ $('div[class*=acceptable]').draggable( { }); }); </script> </head> <body style="font-size:62.5%;"> <div class=" CategoryTreeTag"> <div class="acceptable CategoryTreeSection"> <div class="CategoryTreeItem"> <span class="accepting CategoryTreeBullet"> <a href="/wiki/index.php/Category:Main1" class="CategoryTreeToggle CategoryTreeLoaded" onclick="this.href='javascript:void(0)'; categoryTreeCollapseNode('Main1',{"mode":0,"hideprefix":20,"showcount":false,"namespaces":false},this);" title="collapse"><img src="/images/resultset_next.png" /></a> </span> <a class="accepting CategoryTreeLabel CategoryTreeLabelNs14 CategoryTreeLabelCategory" href="/wiki/index.php/Category:Main1">Main1</a> </div> <div class="CategoryTreeChildren" style="display:block"><i class="CategoryTreeNotice">no subcategories</i></div> </div> </div> <div class=" CategoryTreeTag"> <div class="acceptable CategoryTreeSection"> <div class="CategoryTreeItem"> <span class="accepting CategoryTreeBullet"> <a href="/wiki/index.php/Category:Main2" class="CategoryTreeToggle CategoryTreeLoaded" onclick="this.href='javascript:void(0)'; categoryTreeCollapseNode('Main2',{"mode":0,"hideprefix":20,"showcount":false,"namespaces":false},this);" title="collapse"><img src="/images/resultset_next.png" /></a> </span> <a class="CategoryTreeLabel CategoryTreeLabelNs14 CategoryTreeLabelCategory accepting" href="/wiki/index.php/Category:Main2">Main2</a> </div> <div class="CategoryTreeChildren" style="display:block"> <div class="acceptable CategoryTreeSection"> <div class="CategoryTreeItem"> <span class="accepting CategoryTreeBullet"> <a href="/wiki/index.php/Category:Sub21" class="CategoryTreeToggle" onclick="this.href='javascript:void(0)'; categoryTreeExpandNode('Sub21',{"mode":0,"hideprefix":20,"showcount":false,"namespaces":false},this);" title="expand"> <img src="/images/resultset_next.png" /></a> </span> <a class="CategoryTreeLabel CategoryTreeLabelNs14 CategoryTreeLabelCategory accepting" href="/wiki/index.php/Category:Sub21">Sub21</a> </div> <div class="CategoryTreeChildren" style="display:none"></div> </div> </div> </div> </div> </body> </html> problem 2: after i was not able to get problem 1 solved i thought, it would be possible, if i only drag <a> tags...this now works perfekt in internet explorer and firefox, but not with chrome. the <a> tag follows not the mouse, it is going anywhere. source code: <!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.droppable.js"></script> <style type="text/css"> </style> <script type="text/javascript"> $(document).ready(function(){ $("a[class*=draggable]").draggable({ /* helper: function giveDiv(dr) { // var myObj = dr["originalEvent"]; var myObj = dr; for (myKey in myObj){ alert ("myObj["+myKey +"] = "+myObj[myKey]); } return "<a>hallo</a>"; } */ }); }); </script> </head> <body style="font-size:62.5%;"> <a class="draggable">hallo</a> </body> </html> does anybody know, how to solve the problem (in this special case the solution for only 1 problem is needed ) hope you can help me...thanks Quote Link to comment Share on other sites More sharing options...
shangl Posted July 30, 2009 Author Share Posted July 30, 2009 here i have a more readable code for problem 1: <!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.droppable.js"></script> <style type="text/css"> #draggable { width: 100px; height: 70px; background: silver; } #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; } </style> <script type="text/javascript"> $(document).ready(function(){ $('div[class*=acceptable]').draggable( { }); }); </script> </head> <body style="font-size:62.5%;"> <div class="acceptable"> sub <div class="acceptable"> sub1 <div class="acceptable"> sub2 </div> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.