Javascript 如何处理将多个列表项放入临时占位符中，并将其设置回删除位置？

我的问题说明：

我有一个html列表，它是通过PHP读取的XML动态创建的。XML包含一个父节点作为水果，中层节点作为工作日（星期一、星期二、星期三、星期四、星期五），叶子作为水果（苹果、香蕉、梨…）

叶子、水果（苹果、香蕉、梨……）可以在中级项目（一周的工作日）之间自由拖放。 我还添加了一个特性，即叶节点（苹果、香蕉、梨…）可以放回储藏室，因此可以从叶节点中删除临时节点。当它被放置到餐具室时，垃圾箱图标变为回收图标，可以将叶子（苹果、香蕉、梨…）放回中层节点（一周的工作日）下

只需要在客户端进行移动，不需要数据库或任何文件系统存储

我希望代码能够正常工作，但我在Javascript方面遇到了问题。当代码处理第一个中级项时，它可以正常工作。当我试图处理其他中级（周一后的其他工作日）的所有叶子（苹果、香蕉、梨…）时，代码无法正常工作。Javascript代码基于一些JQuery示例，可排序、可拖动、可拖放的代码

因此，我想请您帮助我如何处理将多个列表项放入临时占位符中，并将其设置回删除位置的问题

谢谢你的帮助

提前谢谢

问候,， 加博

代码示例

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;
        });


    });

<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>

<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>

$（函数（）{
$（“#可排序，#可排序2，#可排序3，#可排序4，#可排序5，#可排序目标”）。可排序({
回复：false，
connectWith:“.connectedSortable”，
真的，
光标：“移动”，
助手：“克隆”，
句柄：'.drag'
}).disableSelection（）；
$（“ul.droptrue”）。可排序({
与“ul”连接
}).hover（函数（）{
光标：“移动”
});
变量$mcTree=$（“#可排序”），$mcContainer=$（“#droptarget”）；
//让食品储藏室可以放下，接受水果
$mcContainer.droppable({
接受：“#可排序>li”，
activeClass：“ui状态突出显示”，
drop：函数（事件、用户界面）{
deleteImage（ui.draggable）；
}
});
//让水果也可以放下，接受食品储藏室的物品
$mcTree.droppable({
接受：#droptarget li“，
activeClass：“自定义活动状态”，
drop：函数（事件、用户界面）{
可回收图像（ui.draggable）；
}
});
//图像删除功能
变量循环_图标=“”；
函数deleteImage（$item）{
$item.fadeOut（函数（）{
var$list=$（'ul'，$mcContainer）.length？$（'ul'，$mcContainer）：$（'p>我将使用jQuery中的.data（）函数来完成您试图完成的任务。要有效地完成这一任务，您需要稍微更改HTML。您有多个'id=“leaf”'案例，但您无法做到这一点。id被设计为只使用一次

也许你应该把它们设为id_1、id_2、id_3等等。这也将有助于我的建议

在droppable中“drop”事件的回调函数中，您希望捕获要从中删除的原始ID，并将其存储在数据属性中。例如：

var that = $(this);
that.data('source', that.parents('div')[0].attr('id'));

然后，当您恢复所有内容时，您将获取原始ID并将该项追加到它所属的位置

var that = $(this);
that.detach().append('#'+that.data('source'));

我将使用jQuery中的.data（）函数来完成您试图完成的任务。为了有效地完成这一任务，您需要稍微更改HTML。您有多个“id=”leaf“案例，但您不能这样做。id被设计为只使用一次

也许你应该把它们设为id_1、id_2、id_3等等。这也将有助于我的建议

在droppable中“drop”事件的回调函数中，您希望捕获要从中删除的原始ID，并将其存储在数据属性中。例如：

var that = $(this);
that.data('source', that.parents('div')[0].attr('id'));

然后，当您恢复所有内容时，您将获取原始ID并将该项追加到它所属的位置

var that = $(this);
that.detach().append('#'+that.data('source'));

+1用于记录和措辞良好的第一个问题。+1用于记录和措辞良好的第一个问题。