Mo3g4u/vue.js drag and drop

## vue.js drag and drop
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        <!--
        .normal {
            background-color: grey;
        }
        .drag {
            background-color: green;
        }
        .dragArea{
            min-height: 10px;
        }
        -->
    </style>

</head>
<body>

<div id="main">
    <h1>Vue Dragable For</h1>

    <div class="drag">
        <h2>Draggable</h2>

        <table>
            <tbody is="draggable"  element="tbody" :list="list" class="dragArea">
                <tr v-for="element in list"><td>{{ element.name }}</td></tr>
            </tbody>
        </table>


    </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>


<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<script src="vuedraggable.min.js"></script>

<script>
    var vm = new Vue({
        el: "#main",
        data: {
            list:[
                {name:"aaaaaaaaaaaaaaaaa"},
                {name:"bbbbbbbbbbbbbbbbb"},
                {name:"ccccccccccccccccc"}
                ]
        },
        methods:{
            add: function(){
                this.list.push({name:'dddddddddddd'});
            },
            replace: function(){
                this.list=[{name:'xxxxxxxxxxxx'}]
            }
        }
    });

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style type="text/css">
	<!--
	.normal {
	background-color: grey;
	}
	.drag {
	background-color: green;
	}
	.dragArea{
	min-height: 10px;
	}
	-->
	</style>

	</head>
	<body>

	<div id="main">
	<h1>Vue Dragable For</h1>

	<div class="drag">
	<h2>Draggable</h2>

	<table>
	<tbody is="draggable" element="tbody" :list="list" class="dragArea">
	<tr v-for="element in list"><td>{{ element.name }}</td></tr>
	</tbody>
	</table>


	</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>



	<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
	<script src="vuedraggable.min.js"></script>

	<script>
	var vm = new Vue({
	el: "#main",
	data: {
	list:[
	{name:"aaaaaaaaaaaaaaaaa"},
	{name:"bbbbbbbbbbbbbbbbb"},
	{name:"ccccccccccccccccc"}
	]
	},
	methods:{
	add: function(){
	this.list.push({name:'dddddddddddd'});
	},
	replace: function(){
	this.list=[{name:'xxxxxxxxxxxx'}]
	}
	}
	});

	</script>

	</body>
	</html>