vue.dragable.for example 2

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>List 1 v-dragable-for</h2>
            <div class="dragArea" >
                <template v-dragable-for="element in list1" options='{"group":"people"}'>
                    <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"}'>{{element.name}}</div>
             </div>
         </div>

        <div class="normal">
            <h2>List 1 v-for</h2>
            <div>
                <div v-for="element in list1">{{element.name}}</div>
             </div>

            <h2>List 2 v-for</h2>
            <div>
                <div v-for="element in list2">{{element.name}}</div>
            </div>
        </div>
    </div>

CSS

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

JavaScript

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