Vuejs jQuery sortable example

by billiamthesecond

HTML

<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<h2>Reproduction</h2>
<ol>
    <li>Drag any item below item 3</li>
    <li>Verify <code>&lt;!-- v-repeat--&gt;</code> comment no longer appears at end of list</li>
</ol>

 <div id="ex-sortable">    
    <div v-component="my-sortable" v-with="model: list"></div>   
</div>

<script type="text/x-template" id="sort-template">
    <ul>
        <li v-repeat="model">{{$value}}</li>
    </ul>
</script>

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 30px;
}

ul li {
    padding: 10px;
    display: block;
    background: #EFEFEF;
    border: solid 1px #CCC;
    margin-bottom: 5px;
}

JavaScript

var list =  ['Item 1', 'Item 2', 'Item 3'];

Vue.component('my-sortable', {
    template: "#sort-template",
    ready: function (value) {
        Sortable.create(this.$el.firstChild, {
            draggable: 'li'
        });
    }
});

new Vue({
    el: '#ex-sortable',
    data: {
        list: list,
    }
});