vue js实现列表拖拽

<el-radio-group v-else v-model="radioLabel" class="radio-group">
   <div v-for="(item,index) in dataSettingForm.staticData" :key="index" draggable="true" @dragstart="dragStart(index)" @dragenter="dragEnter(index)" @drageover="dragOver(index)" @dragend="dragEnd(index)">
         <el-radio :label="item.value" @change="changeRadio(item,index)">
            <i class="iconfont iconfont-remove" title="移动"></i>
            <el-input class="radio-data" type="text" v-model="item.text"  autocomplete="off" @keyup.native.enter="saveElementConfig" @blur="saveElementConfig"></el-input>
            <el-input class="radio-data" type="text" v-model="item.value"  autocomplete="off"></el-input><i class="iconfont iconfont-delete2" @click.stop="deletDataSource(item,index)" title="删除"></i>
        </el-radio>
    </div>
</el-radio-group>
<el-button type="primary" class="w-300" @click="addItem">添加一项</el-button>

因为需求用的是单选框，大家可以根据自己情况自定义添加，拖拽主要用的就是
draggable=“true” @dragstart=“dragStart(index)” @dragenter=“dragEnter(index)” @drageover=“dragOver(index)” @dragend="dragEnd(index)"

            /** 
            * 静态数据拖拽排序
            * 开始拖动  （tempx和tempx2在data里面定义就好）
            */
            dragStart(index) {
    
    
                this.tempx=index;
            },
            /**
             * 拖动后进入某个控件内
             */
            dragEnter(index) {
    
    
                this.tempx2=index;
            },
            /**
             * 移动拖动对象
             */
            dragOver(index) {
    
    
                this.tempx2=index;
            },
            /**
             * 完成拖动
             */
            dragEnd(index) {
    
    
                if(this.tempx==this.tempx2){
    
    
	                return ;
	            }else{
    
    
	                let t=  this.dataSettingForm.staticData[this.tempx];
	                this.dataSettingForm.staticData.splice(this.tempx,1);
	                this.dataSettingForm.staticData.splice(this.tempx2,0,t);
	                this.tempx=-1;
	                this.tempx2=-1;                   
	                this.$forceUpdate();
	            }
            },
            /**
            *新加一项静态数据
            */
            addItem(){
    
    
                this.dataSettingForm.staticData.push({
    
    
                    text:"选项"+Number((this.dataSettingForm.staticData.length)+1),
                    value:"option"+Number((this.dataSettingForm.staticData.length)+1)
                });
                this.saveElementConfig();
            },