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

Question

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

• 两个列表（网格样式）列表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>"
   );
  });

任何帮助将不胜感激。