Iview结合draggable 实现左右拖拽效果（比如配置手机端模块）

 <Col :span="10" style="padding:100px 9%;height:850px">
            <Row id="telStyle">
                <div class="tel" :style="menusFlag ? 'padding-bottom:48px' : 'padding-bottom:0'">

 <!-- 拖拽组件draggable，add添加组件的方法，update添加组件之后的排序方法，value组件库 -->
 
                    <draggable
                        style="width:100%;height:100%"
                        :group="{name: 'menu', put: true}"
                        @add="addCollection"
                        @update="sortCollection"
                        :value="collections"
                    >
                        <!-- 循环组件库，使用is=组件名来循环渲染组件 -->
                        <Col
                            style="margin-bottom:20px"
                            @contextmenu.prevent.native="openMenu($event,item,i)"
                            v-for="(item,i) in collections"
                            :key="i"
                        >
                            <component :is="item.type" :data="item"></component>
                        </Col>
                    </draggable>
                </div>
            </Row>
        </Col>
        <Col :span="12" offset="2">
            <Row style="padding: 10px 10% 0 10%">
                <Form
                    ref="modelValidate"
                    :model="modelValidate"
                    :rules="ruleValidateModel"
                    :label-width="85"
                >
                    <Col span="18">
                        <FormItem label="模板名称" prop="name">
                            <Input v-model="modelValidate.name" placeholder="请输入模板名称"></Input>
                        </FormItem>
                    </Col>

                    <Col span="5" offset="1">
                        <Button
                            @click="sendDataAll('modelValidate')"
                            style="width:100%"
                            type="success"
                        >提交</Button>
                    </Col>
                </Form>
            </Row>
            <h4 style="line-height:42px;font-size:15px;background:#F6F6F6;padding: 0 20%">
                H5配置组件库：
                <span style="color:#666;font-size:12px;font-weight:100">请拖动组件至左侧手机模型</span>
            </h4>
            <Row id="modules" style="margin:0 10% 10px 19%;border:1px solid #d5e8fc">
                <draggable
                    :group="{name:'menu', put: false}"
                    :sort="false"
                    :value="notCollectedMenus"
                >
                    <div
                        v-for="(item, i) in notCollectedMenus"
                        :key="i"
                        style="padding:5px 20px;line-height:100%;border-bottom:1px solid #d5e8fc"
                    >
                        <component :is="item.type" :data="item"></component>
                    </div>
                </draggable>
                <Col span="24"></Col>
            </Row>
        </Col>


//添加组件和排序方法
 addCollection(evt) {

            let newCollectionIndex = evt.newIndex
            let menuIndex = evt.oldIndex
			//由于双向绑定原因，转成字符串来避免原始数据更新
            let data = JSON.parse(JSON.stringify(this.notCollectedMenus[menuIndex]))
            data.clone = true
            let newCollection = {}

            newCollection = data
			collections.splice(newCollectionIndex, 0, newCollection)
           

        },

  sortCollection(evt) {
            let newIndex = evt.newIndex
            let oldIndex = evt.oldIndex

            let collection = this.collections[oldIndex]
            this.collections.splice(oldIndex, 1)
            this.collections.splice(newIndex, 0, collection)
        },

右边组件库里面的组件可以拖拽至左侧手机模型，左侧手机模型里面的各个组件也可以拖拽排序