jQuery UI可拖放，但不能排序 [英] JQuery UI draggable and droppable but not sortable

问题描述

在以下情况下，我的网页上有2个列表:

I have 2 lists on my webpage with the following scenario:

1. 列表A是可排序的.
2. 列表B可与列表A拖放，但不能在其内部进行排序.

我已经尝试了JQuery UI中的示例，并且还在SO上查找了一些帖子.似乎无法让#2正常工作.

I have tried examples from JQuery UI and looked up some posts on SO as well. Can't seem to get #2 working.

有人有见识吗?

谢谢.

代码:

$( "#listA" ).droppable({accept: "#listB li"}).sortable({
}).disableSelection();


$( "#listB li" ).draggable({
    appendTo: "body",
    helper: "clone",
    connectToSortable: '#listA'
}).droppable({accept: "#listA"});


<ul id="listA">
  <li id="ul_item_1">item-1</li>
  <li id="ul_item_2">item-2</li>
  <li id="ul_item_3">item-3</li>
</ul>
<br>
<br>
<ul id="listB">
  <li id="ul_item_4">item-4</li>
  <li id="ul_item_5">item-5</li>
  <li id="ul_item_6">item-6</li>
</ul>

这是JSFiddle链接: http://jsfiddle.net/kmenezes/8eCJH/

Here is the JSFiddle link: http://jsfiddle.net/kmenezes/8eCJH/

我让ListA可以按预期工作(可拖动，可拖放和可排序).我无法获得要放入ListB的项目.这就是我要做的一切.

I have got ListA to work as expected (draggable, droppable and sortable). I cannot get an item to drop into ListB. That is all I need to get this working.

谢谢！

推荐答案

在将其与示例中的设置方式配合使用时，我遇到了麻烦.你.

I had trouble getting it to work with how you have it set up in your example.. I made a couple of work a rounds that hopefully will be helpful to you.

示例1

• 您可以在列表A和列表B之间移动，但是如果您尝试对列表B进行排序，那么它将被还原.

HTML

<ul class="sortable" id="listA">
  <li id="ul_item_1">item-1</li>
  <li id="ul_item_2">item-2</li>
  <li id="ul_item_3">item-3</li>
</ul>
<br>
<br>
<ul class="sortable" id="listB">
  <li id="ul_item_4">item-4</li>
  <li id="ul_item_5">item-5</li>
  <li id="ul_item_6">item-6</li>
</ul>

jQuery

$('#listA, #listB').sortable({
  helper: "clone",
  placeholder: "selected-option",
  forcePlaceholderSize: true,
  dropOnEmpty: true,
  revert: true,
  connectWith: '.sortable',
  tolerance: "pointer",
  cursor: "move",
  beforeStop: function (event, ui) {
    if($(ui.helper).parent().attr('id') === 'listB' && $(ui.placeholder).parent().attr('id') === 'listB')
       return false; 
  }
});

小提琴: http://jsfiddle.net/trevordowdle/PK3LE/

更新

mccc提供了对示例1的更新，没有引发错误. (请参阅评论)

mccc provided an update to example 1 that doesn't throw an error. (see comments)

小提琴: http://jsfiddle.net/PK3LE/8/

示例2

• 类似于Example1，只是像您在示例中一样克隆了List2.

小提琴: http://jsfiddle.net/trevordowdle/PK3LE/2/

这篇关于jQuery UI可拖放，但不能排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！