我正在尝试在两个列表之间拖放项目
我的要求是
列表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'
请任何人帮助我解决此问题
答案 0 :(得分:0)
这是我想出的。
当我将一个项目拖到第一个列表中时,我允许进行排序,以便您可以选择将其放置在哪里,一旦删除该项目,列表将不再是可排序的。如果您不想这样做,请告诉我。
可拖动的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>