vue.js 2.0 manual drag drop sample

gistfile1.txt

<h1>User List (sort)</h1>

<p><a href="{{ basePath }}/top">Top</a></p>
<p><a href="{{ basePath }}/user/add">Add</a></p>
<div id="userList">

    <table border="1">
        <thead>
        <tr>
            <th>■</th>
            <th>username</th>
            <th>email</th>
            <th>fullname</th>
            <th>sort</th>
            <th>uuid</th>
            <th>edit</th>
            <th>delete</th>
        </tr>
        </thead>
        <tbody>
        {% raw %}
        <tr v-for="item in orderByResults" draggable="true" v-on:dragstart="dragstart(item, $event)" v-on:dragend="dragend($event)" v-on:dragenter="dragenter(item, $event)">
            <td>■</td><td>{{ item.username }}</td><td>{{ item.email }}</td><td>{{ item.fullname }}</td><td>{{ item.sort }}</td><td>{{ item.uuid }}</td><td>edit</td><td>delete</td>
        </tr>
        {% endraw %}
        </tbody>
    </table>

    {% raw %}
    <pre>{{ $data }}</pre>
    {% endraw %}
</div>


<input type="hidden" id="base-path" value="{{ basePath }}" >

<script src="{{ basePath }}/common/js/lodash.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--<script src="{{ basePath }}/common/js/vue.min.js"></script>-->
<script src="{{ basePath }}/common/js/axios.min.js"></script>
<script src="{{ basePath }}/common/js/vue2_manual_drag_and_drop.js"></script>

vue2_manual_drag_and_drop.js

var basePath = document.getElementById( "base-path" ).value;
(function(path){

    var appList = new Vue({
        el: '#userList',
        data: {
            basePath: path,
            draggingItem: undefined,
            usersList: [] // 後でデータを詰める
        },
        methods: {
            dragstart: function(item, e) {
                this.draggingItem = item; // 一旦保存
                e.target.style.opacity = 0.5;
                e.dataTransfer.setData('text/plain', 'dummy'); // Firefox用 http://stackoverflow.com/questions/21507189/dragenter-dragover-and-drop-events-not-working-in-firefox
            },
            dragend: function(e) {
                e.target.style.opacity = 1;
            },
            dragenter: function(item, e) {
                const tempIndex = item.sort;
                item.sort = this.draggingItem.sort;
                this.draggingItem.sort = tempIndex;
            }
        },
        computed: {
            // Lodash を使っている
            orderByResults: function() {
                return _.orderBy(this.usersList, 'sort', 'desc')
            }
        }
    });

    axios.get(this.basePath + '/user/sort_list_data')
        .then(function (response) {
            appList.usersList = response.data;
        })
        .catch(function (error) {
            console.log(error);
        });

})(basePath);