Jquery Drag drop - 一个列表具有可排序，另一个列表具有可拖动和可拖放而不进行排序

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('取消'(

错误：jquery ui.js:16692 Uncaught TypeError:无法读取null的属性"removeChild">

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

Answer 1

以下是我的想法。

我允许在将项目拖到第一个列表中时进行排序，这样您就可以选择将其放置在哪里，一旦项目被删除，列表将不再可排序。如果你不想这样，请告诉我。

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

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

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

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

这是我的小提琴

希望这就是你想要的！

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>