jQuery拖放-一个具有可排序列表，另一个具有可拖动和可拖放列表，但没有排序

Question

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

我的要求是，

列表A （通过拖放到列表B，但不能排序）项目1项目2项目3

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

我尝试过。sortable（），但是它使列表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未捕获的TypeError：无法读取null的属性'removeChild'

[请任何人帮助我解决此问题

Answer 1

这是我想出的。

我将项目拖到第一个列表中时允许排序，以便您可以选择放置位置，一旦删除该项目，列表将不再可排序。如果您不希望这样做，请告诉我。

[draggable revert选项似乎有点小故障，但它包含了它，以便可拖动的项目不会在整个地方浮动。

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

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

在第二个列表中，当我们开始拖动项目时，我们希望在第一个列表上启用可排序，以便我们可以选择将其放置在何处。当收到第二个列表中的项目时，如果该项目是可拖动项目，我们希望销毁该可拖动项目，使其现在成为可排序项目。

这里是我的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>