Jquery拖放-一个列表可排序，另一个列表可拖动&；无排序的可丢弃的

我试图在两个列表之间拖放项目

我的要求是,

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

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

我尝试了.sortable（），但它使列表具有可排序功能

<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();
  } );

第1项
第2项
第3项
第4项
第5项


第1项
第2项
第3项
第4项
第5项

$（函数（）{
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”，
beforeStop：函数（事件、用户界面）{
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未捕获类型错误：无法读取null的属性“removeChild”

---

请任何人帮我解决这个案子

这是我想到的

我允许在将项目拖动到第一个列表中时进行排序，以便您可以选择将其放置在何处，一旦项目被删除，列表将不再可排序。如果你不想要这个，请让我知道

可拖动的

revert

选项似乎有点小毛病，但它的加入使可拖动的项目不会到处浮动

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

第一个列表有可拖动项，我们不希望允许在此列表中进行排序，因此在拖动开始时，我们将使用

selector.sortable（'disable'）

禁用可排序性。一旦我们收到第一个列表中的项目，我们需要禁用可排序性，以便这些项目不再可排序。然后，我们将使用draggable初始化删除的项

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

这是我的

希望这就是你要找的

init_draggable（$（'.draggable item'）；
$（'#可排序2'）。可排序({
连接：“#可排序1，#可排序2”，
项：'.draggable项，.sortable项'，
开始：功能（事件、用户界面）{
$（'#sortable1'）。可排序（'enable'）；
},
接收：功能（事件、用户界面）{
if（ui.item.hasClass（'ui-draggable'））{
//销毁draggable，以便我们可以将其拖到可排序容器之外
ui.可拖动的项目（“销毁”）；
}
}
});
$（'#可排序1'）。可排序({
连接：“#可排序1，#可排序2”，
项：'.draggable项，.sortable项'，
接收：功能（事件、用户界面）{
$（'#sortable1'）。可排序（'disable'）；
var widget=ui.item；
初始化拖动（小部件）；
}
});
函数初始化可拖动（小部件）{
widget.draggable({
connectToSortable:“#可排序2”，
堆栈：'.draggable项'，
回复：对，
持续时间：200，
开始：功能（事件、用户界面）{
$（'#sortable1'）。可排序（'disable'）；
}
});
}

ul{
填充：10px；
列表样式类型：无；
宽度：200px；
}
李{
文本对齐：居中；
填充物：5px10px；
保证金：5px；
}
.可拖动项目{
背景#9bcdf0；
}
.可排序项目{
背景：#6c2020；
}

项1
第2项
第3项
第4项
第5项


项目1
项目2
项目3
项目4
项目5

以下是我的想法

我允许在将项目拖动到第一个列表中时进行排序，以便您可以选择将其放置在何处，一旦项目被删除，列表将不再可排序。如果你不想要这个，请让我知道

可拖动的

revert

选项似乎有点小毛病，但它的加入使可拖动的项目不会到处浮动

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

第一个列表有可拖动项，我们不希望允许在此列表中进行排序，因此在拖动开始时，我们将使用

selector.sortable（'disable'）

禁用可排序性。一旦我们收到第一个列表中的项目，我们需要禁用可排序性，以便这些项目不再可排序。然后，我们将使用draggable初始化删除的项

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