Описание моей проблемы:
У меня есть список HTML, который создается на лету из XML, читаемого PHP. XML состоит из родительского узла в виде ФРУКТОВ, узлов среднего уровня как рабочих дней (ПОНЕДЕЛЬНИК, ВТОРНИК, СРЕДА, ЧЕТВЕРГ, ПЯТНИЦА) и уходит в виде фруктов (APPLE, BANANA, PEAR ...)
Листья, фрукты (APPLE, BANANA, PEAR ...) можно свободно перетаскивать между предметами среднего уровня (рабочие дни недели).
Я также добавил функцию, что конечные узлы (APPLE, BANANA, PEAR ...) могут быть возвращены в кладовую, поэтому временные удаляются из конечных узлов. Когда он помещается в кладовую int, значок корзины меняется на значок корзины, который может вернуть лист (APPLE, BANANA, PEAR ...) под узлом среднего уровня (рабочие дни недели).
Перемещения требуются только на стороне клиента, база данных или хранилище файловой системы не требуются.
Я бы хотел, чтобы код работал, но я застрял в Javascript. Он работает правильно, когда код обрабатывает первый элемент среднего уровня. Когда я попытался обработать все листья (APPLE, BANANA, PEAR ...) на других средних уровнях (в другие рабочие дни после понедельника), код не работал должным образом. Код Javascript, основанный на примере JQuery, сортируемые, перетаскиваемые и сбрасываемые коды.
Итак, я хотел бы спросить вашу помощь о том, как я могу обработать несколько элементов списка, помещаемых во временный заполнитель, и возвращаться к тому месту, откуда он был удален?
Любая помощь приветствуется.
Заранее спасибо.
С уважением,
Gaboo
Образцы кода
Код Javascript выглядит следующим образом:
$(function() {
$("#sortable,#sortable2,#sortable3,#sortable4,#sortable5,#droptarget").sortable({
revert: false,
connectWith: ".connectedSortable",
dropOnEmpty: true,
cursor: 'move',
helper: "clone",
handle: '.drag'
}).disableSelection();
$( "ul.droptrue" ).sortable({
connectWith: "ul"
}).hover( function (){
cursor: 'move'
});
var $mcTree = $( "#sortable" ),$mcContainer = $( "#droptarget" );
// let the pantry be droppable, accepting the fruit items
$mcContainer.droppable({
accept: "#sortable > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
}
});
// let the fruit be droppable as well, accepting items from the pantry
$mcTree.droppable({
accept: "#droptarget li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});
// image deletion function
var recycle_icon = '<a href="" title="Recycle this image" class="remove ui-icon ui-icon-refresh">Delete Leaf</a>';
function deleteImage($item) {
$item.fadeOut(function() {
var $list = $('ul',$mcContainer).length ? $('ul',$mcContainer) : $('<span "/>').appendTo($mcContainer);
$item.find('a.ui-icon-trash').remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({ width: '140px' }).find('img').animate({ height: '72px' }).css({'border-color':'red'});
});
});
}
// image recycle function
var trash_icon = '<a href="" title="Delete this image" class="remove ui-icon ui-icon-trash">Recycle Leaf</a>';
function recycleImage($item) {
$item.fadeOut(function() {
$item.find('a.ui-icon-refresh').remove();
$item.css('width','140px').append(trash_icon).find('img').css({'height':'72px'}).end().appendTo($mcTree).fadeIn();
});
}
// resolve the icons behavior with event delegation
$('ul#sortable > li').click(function(ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-trash')) {
deleteImage($item);
} else if ($target.is('a.ui-icon-zoomin')) {
viewLargerImage($target);
} else if ($target.is('a.ui-icon-refresh')) {
recycleImage($item);
}
return false;
});
});
XML-код выглядит следующим образом:
<parent id="FRUITS">
<mid-level id="MONDAY">
<leaf id="APPLE" />
<leaf id="BANANA" />
</mid-level>
<mid-level id="TUESDAY">
<leaf id="PEAR" />
<leaf id="STRAWBERRY" />
<leaf id="NUT" />
</mid-level>
<mid-level id="WEDNESDAY">
</mid-level>
<mid-level id="THURSDAY">
<leaf id="BLACKBERRY" />
<leaf id="PEANUT" />
<leaf id="MANGO" />
<leaf id="GRAPE" />
</mid-level>
<mid-level id="FRIDAY">
<leaf id="ALMOND" />
</mid-level>
HTML-код выглядит следующим образом:
<div id='container'>
<span class='left' id='mTree'>
<ul>
<li>FRUITS</li>
<ul>
<li>MONDAY</li>
<ul id="sortable" class="mct connectedSortable droptrue">
<li>
<div id="leaf">
<span class='leafId'>APPLE</span>
<span class='info ui-icon ui-icon-document'></span>
<span class='drag ui-icon ui-icon-arrow-4'></span>
<span><a href='' title='Delete this image' class='remove ui-icon ui-icon-trash'>Delete Leaf</a></span>
</div>
</li>
<li>
<div id="leaf">
<span class='leafId'>BANANA</span>
<span class='info ui-icon ui-icon-document'></span>
<span class='drag ui-icon ui-icon-arrow-4'></span>
<span><a href='' title='Delete this image' class='remove ui-icon ui-icon-trash'>Delete Leaf</a></span>
</div>
</li>
</ul>
<li>TUESDAY</li>
<ul id="sortable2" class="connectedSortable droptrue">
<li>
<div id="leaf">
<span class='leafId'>PEAR</span>
<span class='info ui-icon ui-icon-document'></span>
<span class='drag ui-icon ui-icon-arrow-4'></span>
<span><a href='' title='Delete this image' class='remove ui-icon ui-icon-trash'>Delete Leaf</a></span>
</div>
</li>
<li>STRAWBERRY</li>
<li>NUT</li>
</ul>
<li>WEDNESDAY</li>
<ul id="sortable3" class="connectedSortable droptrue"></ul>
<li>THURSDAY</li>
<ul id="sortable4" class="connectedSortable droptrue">
<li>BLACKBERRY</li>
<li>PEANUT</li>
<li>MANGO</li>
<li>GRAPE</li>
</ul>
<li>FRIDAY</li>
<ul id="sortable5" class="connectedSortable droptrue">
<li>ALMOND</li>
</ul>
</ul>
</ul>
</span>
<span class='right' id='mContainer'>
<span class='containerTitle ui-icon ui-icon-trash'></span>
<span>Pantry</span>
<div id='droptarget' class='connectedSortable droptrue'></div>
</span>
</div>
<li>APPLE<br/></li>
<li>BANANA<br/></li>
<li>PEAR<br/></li>
<li>STRAWBERRY<br/></li>
<li>NUT<br/></li>
<li>BLACKBERRY<br/></li>
<li>PEANUT<br/></li>
<li>MANGO<br/></li>
<li>GRAPE<br/></li>
<li>ALMOND<br/></li>