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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery Sortable With AJAX
& MYSQL
</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script> <link rel='stylesheet' href='styles.css' type='text/css' media='all' /> <script type="text/javascript"> // When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$(function() {
$('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2!
$('div.tree').click(function() {
var o = $(this);
o.children('div').toggle();
o.filter('.parent').toggleClass('expanded');
return false;
});
//$(".draggable").draggable();
//$(".tree").draggable({connectToSortable : ".tree", handle : '.handle',});
$( ".tree" ).droppable({
// accept : ".tree",
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
},
drop: function(ev, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
//$(dropped).detach().appendTo(droppedOn);
// $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
},
// drop: function( event, ui ) {
// var draggableId = ui.draggable.attr("id");
// var droppableId = $(this).attr("id");
// var idd = document.elementFromPoint(ui.offset.left,ui.offset.top);
// $(idd).append("haha");
//$( this )
//.addClass( "ui-state-highlight" )
//.find( "p" ).html("haha "+droppableId);
// ui.draggable.insertAfter($(this).find("p"))
//var elem = document.elementFromPoint(ui.position.left, ui.position.top);
//elem.insertAfter(ui.draggable);
// },
accept: function(d) {
if((d.attr("class")=="tree")){
return true;
}
}
});
});
$(".tree").sortable({
handle : '.handle',
connectWith : '.draggable',
update : function () {
}});
$(".draggable").sortable({
handle : '.handle',
connectWith : '.tree',
update : function () {
}});
});
<div id="info">Waiting for update
</div> <div id="test-list" class="tree">hmm
<div id="listItem_1" class="tree"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />List1
<br />
<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> <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> <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> <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>
<div id="listItem_1" class="tree"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />List 2
<br />
<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> <div id="fruit_2" class="tree"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Orange
<div class="tree"></div></div> <div id="fruit_3" class="tree"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Pear
<div class="tree"></div></div>
<div id="drag-container"> <div id="draggable" class="tree draggable"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /> Drag it!
</div> <input type="text" id="new-item" /><input type="submit" text="Dodaj" onclick="" />
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:(
[JQueryUI] Przesunięcie elementu do sortowalnego drzewa
10.08.2012, 18:54:33
