9

我有两个可排序的列表。我想连接这个列表，这样我就可以在两个方向上将项目从一个列表移动到另一个列表。我使用可排序的 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();

我无法找出问题所在。

有人能帮我吗？

谢谢

4

4 回答 4

17

我想通了。

问题是列表浮动属性。可排序的 connectWith 不适用于 css 浮点数。

可排序的 connectWith 错误

于 2013-02-07T11:22:27.673 回答
4

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

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

架构

于 2018-02-22T22:11:08.667 回答
1

好吧，对我来说，这个列表按预期工作。检查这个：http: //jsfiddle.net/GSA2A/2/

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

您还可以使用：

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

对我来说，在 id 上使用 sortable 函数和在组合这些列表的类上使用 connectWith 看起来更好，也更合乎逻辑。

于 2013-02-06T10:30:56.443 回答
1

我将 ul 都分配给一个 id 并在 jQuery 文件中我得到两个 id 并使用 sortable(); 应用不同的参数，它对我有用你可以使用这个代码我正在使用 jquery-3.1.1.js，你尝试添加包含：'document'

$('#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);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

于 2016-12-31T08:46:07.877 回答