Sortable.js在vue中实现拖拽

Posted 2021-06-22 李元

1 npm install sortablejs --save 

2 xxx.vue

    <template>
        <div>
            <el-bgwhite>
                <el-row>
                    <el-form
                        :model="form"
                        ref="form"
                        label-width="130px"
                        size="small"
                    >
                        <el-row id="topicMove">
                            <el-row
                                class="topicSty"
                                v-for="(item, index) in form.subject"
                                :key="index"
                            >
                                <el-col :span="2" class="centerSty">{{
                                    index + 1
                                }}</el-col>
                                <el-col :span="22">
                                    <el-row>
                                        <el-col :span="16">{{ item.name }}</el-col>
                                        <el-col :span="8" class="rightSty">
                                            <el-button type="text">拖动</el-button>                                         
                                        </el-col>
                                    </el-row>
                                    <el-row
                                        v-for="(it, ind) in item.option"
                                        :key="ind"
                                        v-show="item.type != 3"
                                    >
                                        <el-col :span="16" class="mRsty"
                                            ><el-radio
                                                disabled
                                                v-if="item.type == 1||item.type == 4"
                                            ></el-radio>
                                            <el-checkbox
                                                disabled
                                                v-if="item.type == 2"
                                            ></el-checkbox>
                                            {{ it.option_name }}
                                            <el-row
                                                v-for="(itChild, indChild) in it.option_list"
                                                :key="indChild"
                                                v-show="item.type == 4"
                                                class="childRowTwo"
                                            >
                                                <el-col :span=\'22\'>
                                                    <el-radio
                                                        v-if="it.option_type==2"
                                                        disabled
                                                    ></el-radio>
                                                    <span
                                                        v-if="it.option_type==1"
                                                        >填空：</span>                                            
                                                    {{ itChild.option_name }}
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                    <el-row v-show="item.type == 3">
                                        <el-col :span="16">
                                            <el-input type="textarea"></el-input></el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-row>
                    </el-form>
                </el-row>
            </el-bgwhite>
        </div>
    </template>
    
    <script>
    import Sortable from "sortablejs";
    export default {
        data() {
        return {
            form: {
                subject: [],
            },
        };
    },
        mounted() {
            this.rowDrop();
        },
        methods: {
            //行拖拽
            rowDrop() {
                const tbody = document.getElementById("topicMove");
                var that = this;
                Sortable.create(tbody, {
                    sort: true,
                    animation: 300,
                    onEnd: function (evt) {
                        that.form.subject.splice(
                            evt.newIndex,
                            0,
                            that.form.subject.splice(evt.oldIndex, 1)[0]
                        );
                        
                        var newArray = that.form.subject.slice(0);                    
                        let nowId=newArray[evt.newIndex].id;
                        newArray.forEach((item,index)=>{
                            if(item.relationList.length>0){                           
                                for(var i=0;i<item.relationList.length;i++){
                                    if(item.relationList[i].relation_subject==nowId){
                                        item.relationList.splice(i,1)
                                        i--;
                                    }
                                }
                            }
                        })
                        that.form.subject = [];
                        that.$nextTick(function () {
                            that.form.subject = newArray;
                        });
                    },
                });
            },
        },
    };
    </script>
    
    
    
``