cytsunny
cytsunny

Reputation: 5030

Why oldIndex and newIndex always return 0 for Sortable JS (rubaxa-sortable)?

I am using sortable js for drag and drop action. (Link to github page) As I am using vue.js as well, I am using this plugin to bridge them. I am new to both of the library and so I am trying to duplicate the example given in the plugin. (i.e. this example)

HTML section:

<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 part:

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:{
        }
    });

It works fine on jsfiddle, but when I try to duplicate the case on my local server, it always return 0 for both oldIndex and newIndex in the onUpdate event. This makes the element always insert at the beginning of the second list. Any clue on what can I miss to cause this problem?

Upvotes: 1

Views: 1102

Answers (0)

Related Questions