JQuery Sortable ConnectWith不起作用

Question

我有两个可排序列表。我想连接这个列表，这样我就可以在两个方向上将项目从一个列表移动到另一个列表。我使用可排序的connectWith，但我仍然无法将列表项从一个列表移动到另一个列表。

此外，我可以将项目从一个地方移动到另一个地方，但是在同一个列表中。

以下是代码：

<div class="category-container" data-id="1"> 
    <div class="category-header" data-id="1"> 
    </div>
    <ul class="list-items ui-sortable">
        <li class="item" data-id="3">
        <li class="item" data-id="43">
        <li class="item" data-id="28">
        <li class="item" data-id="24">
        <li class="item" data-id="21">
        <li class="item new" data-id="0">
    </ul>
</div>
<div class="category-container" data-id="2">
    <div class="category-header" data-id="2"> 
    </div>
    <ul class="list-items ui-sortable">
        <li class="item" data-id="17">
        <li class="item" data-id="8">
        <li class="item" data-id="9">
        <li class="item new" data-id="0">
    </ul>
</div>

和JQuery：

 $(".list-items").sortable({
            connectWith: '.list-items',
            items: "li:not(.item.new)",
            placeholder: 'place-holder',
            scroll: false,
            tolerance: "pointer"
}).disableSelection();

我无法找出问题所在。

有人可以帮助我吗？

由于

Answer 1

我想通了。

问题是list float属性。可排序的connectWith不能使用css float。

Sortable connectWith Bug

Answer 2

我只想分享一些我刚才意识到的东西，也许可以帮助别人。

元素将从另一个列表/表接收元素（div / ul），必须有足够的“空格”来接收（宽度和高度）并显示新元素。

Answer 3

嗯，对我而言，这个列表按预期工作..检查一下： http://jsfiddle.net/GSA2A/2/

此外，你应该写有效的html，至少关闭你的标签..大多数浏览器可以根据你使用的doctype来处理缺失的封闭li元素。

您也可以使用：

$('#list1, list2').sortable({.......

对我来说看起来更好，更合乎逻辑的是在id＆＃39; s上使用可排序函数，在组合这些列表的类上使用connectWith。

Answer 4

我将两个ul分配给id

＆＃13;

＆＃13;

<ul id="list">
    <li>School</li>
    <li>Name</li>
    <li>Roll</li>
</ul>
<ul id="thi">
    <li>School</li>
    <li>Name</li>
    <li>Roll</li>
</ul>
	
<div id="fdk">
</div>

＆＃13;

＆＃13;

＆＃13; 在jQuery文件中，我得到id并使用sortable（）; 应用不同的参数，它为我工作，您可以使用此代码我使用jquery-3.1.1.js，您尝试添加包含：＆＃39;文档＆＃39;

＆＃13;

＆＃13;

$('#list, #thi').sortable({
   containment:'document',
   tolerance:'pointer',
   cursor:'pointer',
   revert:true,
   opacity:0.4,
   connectWith:'#list,#thi',
   update: function() {
       // alert('f');
       content = $(this).text();
       $('#fdk').text(content);
   }
});

＆＃13;

＆＃13;

＆＃13;