Question

我使用可排序的js进行拖放操作。（Link to github page）当我使用vue.js时，我正在使用this plugin来桥接它们。我是两个库的新手，所以我试图复制插件中给出的示例。（即this example）

HTML部分：

<div class="drag">
    <h2>List 1 v-dragable-for</h2>
    <div class="dragArea" >
        <template v-dragable-for="element in list1" options='{"group":{ "name":"people", "pull":"clone", "put":false }}' track-by="$index">
            <p>{{element.name}}</p>
        </template>
    </div>

    <h2>List 2 v-dragable-for</h2>
    <div class="dragArea">
        <div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
    </div>
</div>

Javascript部分：

var vm = new Vue({
    el: "#main",
    data: {
        list1:[{name:"John" , id:"1"}, 
                {name:"Joao", id:"2"}, 
                {name:"Jean", id:"3"} ],
        list2:[{name:"Juan", id:"4"}, 
                {name:"Edgard", id:"5"}, 
                {name:"Johnson", id:"6"} ]
        },
    methods:{
        }
    });

它在jsfiddle上运行正常，但是当我尝试在本地服务器上复制大小写时，它总是在onUpdate事件中为oldIndex和newIndex返回0。这使得元素始终插入第二个列表的开头。我有什么理由可以解决这个问题？

为什么oldIndex和newIndex总是为Sortable JS（rubaxa-sortable）返回0？

0 个答案: