Jquery Drag drop - 一个可排序的列表和另一个可拖放的列表，无需排序

Question

我正在尝试在两个列表之间拖放项目，

我的要求是，

列表 A （拖放到列表 B 但不可排序） 第 1 项 第 2 项 第 3 项

列表 B （可排序并拖放到列表 A） 第 4 项 第 5 项 第 6 项

我尝试了 .sortable()，但它使 List A 具有可排序功能，

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

$( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      beforeStop: function (event, ui) {
      console.log($(ui.helper).parent().attr('id'));
      console.log($(ui.placeholder).parent().attr('id'));
      if($(ui.helper).parent().attr('id') === 'sortable1' && $(ui.placeholder).parent().attr('id') === 'sortable1')
      {
                $(this).sortable('cancel');
          }
             },
    }).disableSelection();
  } );

我什至尝试在 beforeStop 事件中停止可排序，但显示错误

$(this).sortable('cancel');

错误： jquery-ui.js:16692 Uncaught TypeError: Cannot read property 'removeChild' of null

请任何人帮我解决这个问题

Answer 1

这是我想出的。

我允许在将项目拖入第一个列表时进行排序，以便您可以选择放置它的位置，一旦项目被删除，列表将不再是可排序的。如果你不想要这个，请告诉我。

可拖动的revert 选项似乎有点小故障，但它包含在内是为了使可拖动的项目不会到处浮动。

我将每个列表分别初始化为可排序的。

第一个列表有可拖动的项目，我们不希望在此列表中允许排序，因此在拖动开始时，我们将使用 selector.sortable('disable') 禁用可排序性。一旦我们在第一个列表中收到一个项目，我们需要禁用可排序性，以便这些项目不再可排序。然后我们将用可拖动的方式初始化拖放的项目。

在第二个列表中，当我们开始拖动一个项目时，我们希望在第一个列表上启用可排序，以便我们可以选择放置它的位置。当接收到第二个列表中的项目时，如果该项目是可拖动的，我们想要销毁可拖动的，以便它现在只是一个可排序的项目。

这是我的fiddle

希望这就是你要找的东西！

init_draggable($('.draggable-item'));

$('#sortable2').sortable({
  connectWith: '#sortable1, #sortable2',
  items: '.draggable-item, .sortable-item',
  start: function(event, ui) {
    $('#sortable1').sortable('enable');
  },
  receive: function(event, ui) {
    if (ui.item.hasClass('ui-draggable')) {
      // destroy draggable so that we can drag outside the sortable container
      ui.item.draggable("destroy");
    }
  }
});

$('#sortable1').sortable({
  connectWith: '#sortable1, #sortable2',
  items: '.draggable-item, .sortable-item',
  receive: function(event, ui) {
    $('#sortable1').sortable('disable');
    var widget = ui.item;
    init_draggable(widget);
  }
});

function init_draggable(widget) {
  widget.draggable({
    connectToSortable: '#sortable2',
    stack: '.draggable-item',
    revert: true,
    revertDuration: 200,
    start: function(event, ui) {
      $('#sortable1').sortable('disable');
    }
  });
}

ul {
  padding: 10px;
  list-style-type: none;
  width: 200px;
}

li {
  text-align: center;
  padding: 5px 10px;
  margin: 5px;
}

.draggable-item {
  background: #9bcdf0;
}

.sortable-item {
  background: #6c2020;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default draggable-item">Item 1</li>
  <li class="ui-state-default draggable-item">Item 2</li>
  <li class="ui-state-default draggable-item">Item 3</li>
  <li class="ui-state-default draggable-item">Item 4</li>
  <li class="ui-state-default draggable-item">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight sortable-item">Item 1</li>
  <li class="ui-state-highlight sortable-item">Item 2</li>
  <li class="ui-state-highlight sortable-item">Item 3</li>
  <li class="ui-state-highlight sortable-item">Item 4</li>
  <li class="ui-state-highlight sortable-item">Item 5</li>
</ul>