vue.dragable.for example 2

by Hugo Carneiro

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://rawgit.com/David-Desmaisons/Vue.Dragable.For/master/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":{ "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>

        <div class="normal">
            <h2>List 1 v-for</h2>
            <div>
                <div v-for="element in list1" track-by="$index">{{element.id}}</div>
             </div>

            <h2>List 2 v-for</h2>
            <div>
                <div v-for="element in list2" track-by="$index">{{element.id}}</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" , id:"1"}, 
				{name:"Joao", id:"2"}, 
				{name:"Jean", id:"3"} ],
		list2:[{name:"Juan", id:"4"}, 
				{name:"Edgard", id:"5"}, 
				{name:"Johnson", id:"6"} ]
		},
	methods:{
		}
	});