vuedraggabletuo拖拽插件

最新推荐文章于 2023-10-16 18:05:49 发布

yyhh~

最新推荐文章于 2023-10-16 18:05:49 发布

阅读量113

点赞数

分类专栏： JS语法文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_60067558/article/details/128440653

版权

JS语法专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vue.draggable一款基于vue的拖拽插件 - itxst.com

   <p slot="title">商品参数</p>
                              <draggable v-model="parameterlist" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
                                    @start="onParameterlist" @end="onParameterlistEnd">
                            <Row type="flex" justify="start" class="margin-top-10"  v-for="(item, index) in product.parameterlist" :key="item.id">
                                <Col span="4">
                                <FormItem 
                                    :prop="'parameterlist.' + index + '.productAttrName'"
                                    :rules="{ required: true, message: '参数名不能为空', trigger: 'blur' }" :label-width="10">
                                    <Input v-model="item.productAttrName" placeholder="参数名"></Input>
                                </FormItem>
                                </Col>
                                <Col span="8" offset="2">
                                <FormItem 
                                    :prop="'parameterlist.' + index + '.productAttrValue'"
                                    :rules="{ required: true, message: '参数值不能为空', trigger: 'blur' }" :label-width="10">
                                    <Input v-model="item.productAttrValue" placeholder="参数值"></Input>
                                </FormItem>
                                </Col>
                                <Col span="2" offset="1">
                                <FormItem 
                                    :label-width="0">
                                    <Button icon="md-close" @click.native="delParam(index)"></Button>
                                </FormItem>
                                </Col>
                            </Row>
                             </draggable>

  onParameterlist (e) {
            this.drag = true;
        },
        onParameterlistEnd (e) {
            console.log(e, '此时的数据');
            this.drag = false;
            const item = { ...this.product.parameterlist[e.oldIndex] };
            this.product.parameterlist.splice(e.oldIndex, 1);
            this.product.parameterlist.splice(e.newIndex, 0, item);
        },

拖拽改变表单列的顺序顺便改变数据的排序。记录一下。