Question

我在页面上有9个盒子（div）。我能够以类似网格的方式将它们移动到不同的位置。

所以基本的可排序功能很好=）

但我有几个问题：

如果我的盒子宽度不一样怎么办？他们可以做什么，如果改变宽度（1 / 3,2 / 3和3/3）。我可以在同一行但不同的列上还有一个2/3盒子和1/3盒子吗？占位符亮点怎么样？

为什么我不能将一个盒子移到一个空的“ul”？我看不到占位符，也没有将框移动到空列？这应该有用吗？

我还希望我的盒子在移动盒子时“轻松”到高亮的占位符。现在他们只是抓住占位符。

我目前的代码：

<script type="text/javascript">
    $(function() {
        $("ul.connectedSortable").sortable({handle:'.kpiValueContainer'});
        $("ul.connectedSortable").sortable({connectWith:'ul'});
        $("ul.connectedSortable").sortable({placeholder:'ui-state-highlight'});
    });
</script>

Answer 1

我在脚本中看到了一些问题。您正在创建3次可排序。只需将所有选项放在一行代码中即可。

<script type="text/javascript"> 
    $(function() { 
        $("ul.connectedSortable").sortable({handle:'.kpiValueContainer', connectWith:'trysomethingelse', placeholder:'ui-state-highlight', revert: true});
    }); 
</script>

我看到的第二个问题是你的connectWith属性。它太宽泛，也适用于你自己的ul.connectedSortable。我宁愿使用比id或类更具体的东西。

对于缓动内容，请查看revert选项。

JQuery可排序效果

1 个答案: