vue.dragable.for

by David Desmaisons

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Dragable.For/v1.0.3/src/vuedragablefor.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Dragable.For/9ad03c251651f16df210d52099cc703da41f257b/src/vuedragablefor.js"></script>
     <div id="main">
        <h1>Vue Dragable For</h1>
       
        <div class="drag">
            <h2>Dragable v-dragable-for</h2>
            <div class="dragArea">
                <div v-dragable-for="element in list">{{element.name}}</div>
             </div>
         </div>

        <div class="normal">
            <h2>Normal v-for</h2>
            <div class="dragArea">
                <div v-for="element in list">{{element.name}}</div>
             </div>
         </div>

        <button @click="add">Add</button>
        <button @click="replace">Replace</button>
    </div>

CSS

.normal {
    background-color: grey;
}
.drag {
    background-color: green;
}
.dragArea{
     min-height: 10px;	
}

JavaScript

var vm = new Vue({
	el: "#main",
	data: {
		list:[{name:"John"}, 
				{name:"Joao"}, 
				{name:"Jean"} ]
		},
	methods:{
			add: function(){
				this.list.push({name:'Juan'});
			},
			replace: function(){
				this.list=[{name:'Edgard'}]
			}
		}
	});