避免使用SortableJS嵌套组

问题描述

我需要在SortableJs doc中执行类似于此示例的操作，但除此之外，我还需要嵌套的可排序列表。我已经实现了，这不是问题。

错误的部分是我必须在嵌套组中实施成本管制，因为我需要避免嵌套组。一个组不能嵌套在另一个组中。一个元素可以嵌套在一个组中。

让我们看看图片，没关系，我们有两个组（item2和item5），里面有一些单个元素

但是，这对于我的项目是禁止的，该组位于grop内（item2中的item5）

我会尝试通过事件控制事物：“ onChoose”，“ onStart”，“ onEnd”，“ onAdd”，“ onUpdate”，“ onSort”，“ onRemove”，“ onChange”，“ onUnchoose”。但是没有结果。

这是我的代码：

<div id="nested" class="row">
    <div id="example2-left" class="list-group nested-sortable col-sm-5">
        <div class="list-group-item">Item 1</div>
        <div class="list-group-item">Item 2
            <div class="list-group nested-sortable"></div>
        </div>
        <div class="list-group-item">Item 4</div>
        <div class="list-group-item">Item 3</div>
        <div class="list-group-item">Item 4</div>
        <div class="list-group-item">Item 5
            <div class="list-group nested-sortable"></div>
        </div>
        <div class="list-group-item">Item 6</div>
    </div>

    <div id="example2-right" class="list-group col-sm-5">
        <div class="list-group-item">Item 1</div>
        <div class="list-group-item">Item 2</div>
        <div class="list-group-item">Item 5</div>
        <div class="list-group-item">Item 3</div>
        <div class="list-group-item">Item 6</div>
    </div>
</div>

和js

$(document).ready(function() {
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
for (var i = 0; i < nestedSortables.length; i++) {
    new Sortable(nestedSortables[i],{
        group: 'shared',animation: 150,fallbackOnBody: true,swapThreshold: 0.65,// trying to control elements
        onChange: function(e) {
            console.log('Left: onChange');
            console.log(e);
            e.preventDefault();
            return false;
        },onUnchoose: function(e) {
            console.log('Left: onUnchoose');
            console.log(e);
            e.preventDefault();
            return false;
        },});
}

new Sortable($('#example2-right')[0],{
    group: 'shared',onUnchoose: function(e) {
        console.log('Right: onUnchoose');
        console.log(e);
        e.preventDefault();
        return false;
    },onAdd: function(e) {
        console.log('Right: onAdd');
        console.log(e);
        e.preventDefault();
        return false;
    },onChange: function(e) {
            console.log('Right: onChange');
            console.log(e);
            e.preventDefault();
            return false;
        },});
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）