左边拖拽到右边数组,左边拖拽到右边，修改右边所有数组中classs =false,拖动当前数据为classs =true,当左边两条相同拖拽到右边时，右边这两条数据的classs都为true了。
return{
design :[],
icon_list:[{
type:'image',
icon:'fa fa-picture-o',
name:'图片',
content:{
image: ''
},
classs:false,
i:''
},
{
type:'text',
icon:'fa fa-font',
name:'富文本',
content:{},
classs:false,
i:''
},
{
type:'par',
icon:'fa fa-bold',
name:'参数',
content:{
trace:[]
},
classs:false,
i:''
}]
}
}
<draggable id="icon_list" class="comps-panel" :list="icon_list" :options="{cursor: 'move',group:{ name:'people', pull:'clone',put:false,cursor: 'move'},cursor: 'move',placeholder:'comp-place',connectWith: '.apps-container',zIndex: 99999, opacity: .6,items: '.comp-thumb:not(.not-sortable)',}">
<p class="comp-thumb" v-for="(item, index) in icon_list" :key="index" v-bind:data-type="item.type" >
<p class="comp-icon"><i v-bind:class="item.icon"></i></p>
<span>{{item.name}}</span>
</p>
</draggable>
<draggable @change="log" id="list2" class="wp-comps J_WBModule apps-container" style="min-height: 450px;" :list="slices" :options="{group:'people',cursor: 'move'}">
<p v-for="(item,index) in slices" :key="index" class="ng-scope ui-sortable-handle">
<p class="panel-comp clearfix">
<p :class="{editing : item.classs}">
<p @click="editSlice(item,index)" class="focus"></p>
{{item.type+index}}`请输入代码`
<i class="del-img fa fa-trash-o" mwl-confirm="" message="确认删除？" placement="left"
on-confirm="removeSlice($index)"
on-cancel="cancelClicked = true">
</i>
</p>
</p>
</p>
</draggable>
editSlice(it,index){
var _this = this;
for (var i in this.slices) {
_this.slices[i].classs = false;
_this.slices[i].i = i;
console.log('classs',_this.slices[i].classs)
};
console.log('222',this.slices);
console.log('i',index)
it.classs = true;
//this.$set(it, 'classs', true);
//this.design = item;
console.log('222',this.slices);
},
log: function (e){
this.editSlice(this.slices[e.added.newIndex],e.added.newIndex);
}
