Jump to content

jquery, 2 drag & drop problems


shangl

Recommended Posts

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=&#39;javascript:void(0)&#39;; categoryTreeCollapseNode(&#39;Main1&#39;,{"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=&#39;javascript:void(0)&#39;; categoryTreeCollapseNode(&#39;Main2&#39;,{"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=&#39;javascript:void(0)&#39;; categoryTreeExpandNode(&#39;Sub21&#39;,{"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

 

 

Link to comment
https://forums.phpfreaks.com/topic/168154-jquery-2-drag-drop-problems/
Share on other sites

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>

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.