javascript - vue2.0 Sortable.js menyeret dari kiri ke masalah tatasusunan kanan

Question

Seret kiri ke tatasusunan kanan, seret kiri ke kanan, ubah suai kelas =false dalam semua tatasusunan di sebelah kanan, seret data semasa ke kelas =true, apabila dua item di sebelah kiri adalah sama dan seretnya ke kanan, dua keping data di sebelah kanan akan Kelas-kelas itu semuanya benar.

   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);
        }

Answer 1

Diproses dengan salinan mendalam