javascript - Jquery 可排序 : clone + appendTo more than one possible target

Question

我正在制作一个计划表，旁边有一个任务列表，分为 3 类。此列表中的任何项目都需要能够克隆并附加到一周 7 天中的一天或多天。

因此，将其拖动到任何一天，都需要克隆它并在拖动到的那一天显示它。到目前为止，我还没有找到一种方法来指示该项目可以追加到 sort4 到 sort10。有没有办法找出您将鼠标悬停在上面的目标是什么，以用变量填充appendTo()？

我当前的代码仅允许将项目克隆到 7 列中的一列。

我的代码:

Function sortable(){

        // the 3 categories of which each item needs to be cloned

        $( "#sort1, #sort2, #sort3" ).sortable({
            connectWith: ".connectedSortable",
            remove: function(event, ui) {
                ui.item.clone().appendTo('#sort4');
                $(this).sortable('cancel');
            }
        }).disableSelection();


        // on each day, you can drag and drop to any other 
           day which needs to move the task

        $( "#sort4, #sort5, #sort6, #sort7, #sort8, #sort9, #sort10" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    };

我确实设法找到了一些可行的解决方案，但我不确定这是最有效的方法。根据光标位置，我可以决定选择器，从而可以按照我需要的方式对其进行排序。

    function sortable() {
        $("#sort1, #sort2, #sort3").sortable({
            connectWith: ".connectedSortable",
            remove: function (event, ui) {
                let pos;
                let scroll = document.querySelector('.week_planner--container').scrollLeft;
                let cursor = (event.pageX - $('.week_planner--container').offset().left) + scroll;
                if (cursor >= 0 && cursor <= 170) {
                    pos = '#sort4';
                } else if (cursor >= 171 && cursor <= 340) {
                    pos = '#sort5';
                } else if (cursor >= 341 && cursor <= 510) {
                    pos = '#sort6';
                } else if (cursor >= 511 && cursor <= 680) {
                    pos = '#sort7';
                } else if (cursor >= 681 && cursor <= 850) {
                    pos = '#sort8';
                } else if (cursor >= 851 && cursor <= 1020) {
                    pos = '#sort9';
                } else if (cursor >= 1021 && cursor <= 1190) {
                    pos = '#sort10';
                }

                ui.item.clone().appendTo(pos);
                $(this).sortable('cancel');
            }
        }).disableSelection();

        $("#sort4, #sort5, #sort6, #sort7, #sort8, #sort9, #sort10").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    };

Answer 1

jQuery 的可排序提供了一些您可以利用的事件。我存储了我们要拖动的列表及其位置，以便我们可以确定拖动后是否应该克隆。

$(function() 
{
  var $movingFrom = null;
  var index = null;
  $(".connectedSortable").sortable(
  {
    connectWith: ".connectedSortable",
    start: function(event, ui) 
    {
      // Log which list we're dragging from and where in the list the item currently resides.
      $movingFrom = ui.item.parent();
      index = ui.item.index();
    },
    receive: function(event, ui) // This is called when we finish the drag and things have moved.
    {
      if (event.target.id == "sortable1")
      {
        // Prevent 1st list receiving items from elsewhere
        ui.sender.sortable("cancel");
      }
      else 
      {
        if ($movingFrom.attr("id") == "sortable1") 
        {
          // If we're moving from the 1st list...
          
          var $insertBefore = $("#sortable1 li").get(index);
          if ($insertBefore !== undefined)
          {
            // Clone original 1st list item
            ui.item.clone().insertBefore($insertBefore);
          }
          else
          {
            // Must have come from the end of the list...
            $("#sortable1").append(ui.item.clone());
          }
        }
      }
    }
  }).disableSelection();
});

#sortable1,
#sortable2,
#sortable3 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left; 
  margin-right: 10px;
}

#sortable1 li,
#sortable2 li,
#sortable3 li 
{
  font-family:Calibri;
  border: solid 1px black;
  background-color:white;
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
  cursor: pointer;
}

<script src="///cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="///cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<meta charset="utf-8">
<div class="demo">
  <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
  </ul>
  <ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
  </ul>
  <ul id="sortable3" class="connectedSortable">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
  </ul>
</div>