Męczę się z tym już dosyć długo. Zdołałem przesuwać(sortować) z gałęzi do podgałęzi drzewa. Nie mogę natomiast zmusić do działania sytuacji, gdy chcę wrzucić do tego drzewa element z oddzielnej listy- które będę kiedyś generował w locie(ajax).
Co mam:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>jQuery Sortable With AJAX &amp; MYSQL</title>
  6. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  7. <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
  8. <link rel='stylesheet' href='styles.css' type='text/css' media='all' />
  9. <script type="text/javascript">
  10.   // When the document is ready set up our sortable with it's inherant function(s)
  11.   $(document).ready(function() {
  12. 	  $(function() {
  13. 	$('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2!
  14. 	$('div.tree').click(function() {
  15. 		var o = $(this);
  16. 		o.children('div').toggle();
  17. 		o.filter('.parent').toggleClass('expanded');
  18. 		return false;
  19. 	});
  20. 	//$(".draggable").draggable();
  21. 	//$(".tree").draggable({connectToSortable : ".tree",     handle : '.handle',});
  22. 	$( ".tree" ).droppable({
  23. 	//	accept : ".tree",
  24.  
  25. 			  onDragEnter:function(e,source){  
  26.         $(source).draggable('options').cursor='auto';  
  27.     },  
  28.        onDragLeave:function(e,source){  
  29.         $(source).draggable('options').cursor='not-allowed';  
  30.     },  
  31.             drop: function(ev, ui) {
  32.             var dropped = ui.draggable;
  33.             var droppedOn = $(this);
  34.             //$(dropped).detach().appendTo(droppedOn);
  35.            // $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
  36. 		},
  37. 		//	drop: function( event, ui ) {
  38. 		//		  var draggableId = ui.draggable.attr("id");
  39. 		//		  var droppableId = $(this).attr("id");
  40. 		//		  var idd = document.elementFromPoint(ui.offset.left,ui.offset.top);
  41.  
  42. 				//  $(idd).append("haha");
  43. 				//$( this )
  44. 					//.addClass( "ui-state-highlight" )
  45. 					//.find( "p" ).html("haha "+droppableId);
  46. 				//	ui.draggable.insertAfter($(this).find("p"))
  47. 				//var elem = document.elementFromPoint(ui.position.left, ui.position.top);
  48. 				//elem.insertAfter(ui.draggable);
  49.  
  50. 		//	},
  51. 			accept: function(d) { 
  52. 				if((d.attr("class")=="tree")){ 
  53. 					return true;
  54. 				}
  55. 			}
  56. 		});
  57. });
  58.     $(".tree").sortable({
  59.       handle : '.handle',
  60.       connectWith : '.draggable',
  61.       update : function () {
  62.  
  63. 	}});
  64.  
  65. 	$(".draggable").sortable({
  66.       handle : '.handle',
  67.       connectWith : '.tree',
  68.      update : function () {
  69.   }});
  70.  
  71. });
  72.  
  73.  
  74.  
  75.  
  76.  
  77. </script>
  78.  
  79. </head>
  80.  
  81. <body>
  82. <div id="container">
  83. 	<pre>
  84. 		<div id="info">Waiting for update</div>
  85. 	</pre>
  86. 	<div id="drop-sort" >
  87. 		<div id="test-list" class="tree">hmm
  88. 			<div id="listItem_1" class="tree"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />List1<br />
  89.  
  90. 					<div id="listItem_1" class="tree draggable"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 1.1 </strong>with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a></div>
  91. 					<div id="listItem_2" class="tree draggable"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 1.2</strong><div class="tree">sub</div></div>
  92. 					<div id="listItem_3" class="tree draggable"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 1.3</strong><div class="tree">sub</div></div>
  93. 					<div id="listItem_4" class="tree draggable"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 1.4</strong><div class="tree">sub</div></div>
  94.  
  95. 			</div>
  96. 			<p>dr</p>
  97. 			<div id="listItem_1" class="tree"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />List 2<br />
  98.  
  99.  
  100. 					<div id="fruit_1" class="tree draggable"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Apple<div class="tree"></div></div>
  101. 					<div id="fruit_2" class="tree"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Orange<div class="tree"></div></div>
  102. 					<div id="fruit_3" class="tree"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Pear<div class="tree"></div></div>
  103.  
  104. 			</div>
  105. 		</div>
  106. 	</div>
  107. 	<div id="vert-spacer"></div>
  108. 	<div id="drag-container">
  109. 		<div id="drag">
  110. 			<div id="draggable"  class="tree draggable"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /> Drag it!</div>
  111. 		</div>
  112. 		<div id="form-box">
  113. 			<input type="text" id="new-item" /><input type="submit" text="Dodaj" onclick="" /> 
  114. 		</div>
  115. 	</div>
  116. </div>
  117. </body>
  118. </html>
[HTML] pobierz, plaintext

Css:
Kod
/* {    margin: 0; padding: 0; }
*/
body {
    font: 0.9em Arial;
    padding: 40px;
}

#info {
    display: block;
    padding: 10px; margin-bottom: 20px;
    border: 1px solid #333;
    background-color: #efefef;
}

#test-list {
    list-style: none;
}

#test-list li {
    display: block;
    padding: 20px 10px; margin-bottom: 3px;
    background-color: #efefef;
}

#test-list li img.handle {
    margin-right: 20px;
    cursor: move;
}

#draggable {
    width: inherit;

    position: inherit;
    background: silver;
    
}
#container {
    width: 800px;
}
#drop-sort {
    float: left;
    width: 250px;
}
#drag {
    float: right;
    width: 300px;
}
#vert-spacer {
    float: left;
    width: auto;
}
div.tree div {
padding-left:16px;
}
div.tree div.parent div {
display:none;
cursor:default;
}
div.tree div.parent {
cursor:pointer !important;
background:transparent url(plus.gif) no-repeat top left;
}
div.tree div.expanded {
background:transparent url(minus.gif) no-repeat top left;
}

Robię stronę i ta funkcjonalność mnie blokuje- nie ruszę dalej bez tego:(