在两个列表之间拖放列表2仅具有排序

问题描述

我正在努力从当前代码中获得所需的功能。

• 两个列表（网格样式）列表1-列表2
  • 列表1的项目可拖到列表2，不可排序，无法克隆（但由于只能添加一次而被禁用）
• 列表2可放置的，可排序的整个项目html复制自列表1。

Code Pen script

 $(function () {
  $('.Box').draggable({
  appendTo: "body",helper: "clone"
});
$("#sortable2").droppable({
  activeClass: "ui-state-default",hoverClass: "ui-state-hover",accept: ":not(.ui-sortable-helper)",drop: function (event,ui) {
    //add first element when cart is empty
    if ($(this).find('.placeholder').length > 0) {
      $(this).find('.placeholder').remove();
      $("<li></li>").text(ui.draggable.text()).appendTo(this);
    } else {
      //used as flag to find out if element added or not
      var i = 0;
      $(this).children("li").each(function () {
          if ($(this).offset().top >= ui.offset.top) {
            //compare
$("<li class='Box'></li>").text(ui.draggable.text()).insertBefore($(this));
            i = 1;
            return false; //break loop
          }
        });

      if (i !== 1) {
        //if element dropped at the end of cart
   $("<li class='Box'></li>").text(ui.draggable.text()).appendTo(this);
      
      }  
      
    }
  }
})
 $(function() {
  $( "#sortable2" ).sortable({
        placeholder: "highlight",items: "li:not(#sortable1)",sort: function () {
     $(this).removeClass("ui-state-default");
    }
  });
 });
});
 //display action in text
 $(function displayWhatDropped() {
   var area = "Area Dropped";
   var item = "fId of the item";

 $(".result").html(
   "[Action] <b>" + item + "</b>" + " dropped on " + "<b>" + area +   "</b>"
   );
  });

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）