<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/comm.css" rel="stylesheet" type="text/css" />
<link href="js/element/css/2.15.7/index.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<div class="left disabled">
<vuedraggable v-model="list" :disabled="!enabled" :group="{ name: 'course', pull: 'clone' }">
<transition-group type="transition">
<div v-for="item in list" :key="item" class="item">{{item}}</div>
</transition-group>
</vuedraggable>
</div>
<div class="right">
<vuedraggable v-model="list2" :group="{ name: 'course'}">
<!--<div v-for="item in list2" :key="item" class="item">{{item}}</div>-->
<div v-for="item in list2" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{item}}</component>
</div>
</vuedraggable>
</div>
<div style="clear:both"></div>
<script type="text/x-template" id="temp">
<div class="row">
<div class="col-left">
<vuedraggable v-model="listitem2" :group="{name: 'course'}">
<div v-for="item in listitem2" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{item}}</component>
</div>
</vuedraggable>
</div>
<div class="col-left">
<vuedraggable v-model="listitem2" :group="{name: 'course'}">
<div v-for="item in listitem2" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{item}}</component>
</div>
</vuedraggable>
</div>
</div>
</script>
</div>
</body>
<!--
{{item}}-->
<script src="js/vue-2.6.14/vue.js"></script>
<script src="js/element/js/2.15.7/index.min.js"></script>
<!--<script src="js/vue-2.6.14/vue.min.js" type="text/javascript"></script>-->
<script src="js/Sortable-1.15.0/Sortable.min.js" type="text/javascript"></script>
<script src="js/Vue.Draggable-2.24.3/vuedraggable.umd.js" type="text/javascript"></script>
<script>
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
};
Vue.component('layout', {
template: "#temp",
components: {
vuedraggable
},
//components: { vuedraggable },
data() {
return {
form: {},
attrs: { 'type': 'success' }, // , disabled: true
listitem2: [],
}
}
})
/* app.component("draggable", window.vuedraggable);*/
new Vue({
el: '#app',
components: { vuedraggable },
created: function () {
},
data: function () {
return {
listitem1: [],
listitem2: [],
enabled: true,
form: {},
attrs: { 'type': 'success' }, // , disabled: true
list: ['layout', 'el-rate', 'el-tag', 'el-button', 'el-switch', 'el-slider', 'el-time-select', 'el-input'],
list2: [],
}
},
methods: {
}
})
</script>
</html>