<style>
.h1 {
margin-bottom: 30px;
text-align: center;
font-size: 36px;
}
.sf-dnd-tom{
padding: 20px;
border:1px dotted #d1d1d1
}
.sf-dnd-tom .tom_item{
height:33px;
line-height:33px;
padding : 5px;
box-sizing: border-box;
}
.sf-dnd-tom .tom_item:nth-child(n+2){
border-top : 2px dashed #ffffff;
}
.sf-dnd-tom .tom_item:nth-child(even){
background-color : rgba(255, 193, 7, 0.5)
}
.sf-dnd-tom .tom_item:nth-child(odd){
background-color : rgba(33, 150, 243, 0.5)
}
.sf-dnd-lucy{
padding: 20px;
border:1px dotted #d1d1d1
}
.sf-dnd-lucy .tom_item{
height:33px;
line-height:33px;
padding : 5px;
box-sizing: border-box;
}
.sf-dnd-lucy .tom_item:nth-child(n+2){
border-top : 2px dashed #ffffff;
}
.sf-dnd-lucy .tom_item:nth-child(even){
background-color : rgba(255, 193, 7, 0.5)
}
.sf-dnd-lucy .tom_item:nth-child(odd){
background-color : rgba(33, 150, 243, 0.5)
}
.sf-dnd-juck{
padding: 20px;
border:1px dotted #d1d1d1
}
.sf-dnd-juck .tom_item{
height:33px;
line-height:33px;
padding : 5px;
box-sizing: border-box;
}
.sf-dnd-juck .tom_item:nth-child(n+2){
border-top : 2px dashed #ffffff;
}
.sf-dnd-juck .tom_item:nth-child(even){
background-color : rgba(255, 193, 7, 0.5)
}
.sf-dnd-juck .tom_item:nth-child(odd){
background-color : rgba(33, 150, 243, 0.5)
}
.code{
margin-top:20px;
text-align: center;
}
</style>
<template>
<h1 class="h1" >lucy -- tom</h1>
<sf-dnd :source="source" name="lucy" from="tom" >
<li v-for="(x, index) in source" :key="x" class="tom_item" >
{{x}}
</li>
</sf-dnd>
<h1>juck -- lucy</h1>
<sf-dnd :source="source2" name="juck" from="lucy" >
<li v-for="(x, index) in source2" :key="x" class="tom_item" >
{{x}}
</li>
</sf-dnd>
<h1>tom -- lucy</h1>
<sf-dnd :source="source1" name="tom" from="lucy">
<li v-for="(x, index) in source1" :key="x" class="tom_item">
{{x}}
</li>
</sf-dnd>
<h1 class="code">{{source1}}</h1>
<h1 class="code">{{list}}</h1>
</template>
<script>
window.sfDND = {
tom : ['1','2','3','4','5'],
juck : ['z', 'y'],
lucy : ['a', 'b']
};
export default {
data : function(){
return {
source1 : window.sfDND.tom,
source : window.sfDND.lucy,
source2 : window.sfDND.juck,
list : []
}
},
methods:{
change : function(list){
console.log(list)
}
}
}
</script>