功能描述：

1、左边【一级、二级、三级】字样是不能拖拽的，【item1、item2...】可以拖拽

2、左边items位置固定，只能向右拖拽，不能上下拖拽，如：item7从左边拖到右边，左边的item7消失，右边增加item7

3、右边items可以自由拖拽，但不能向左拖拽

4、右边items可以删除，如：点击item7的“×”，右边item7消失，左边item7出现

5、重置时，页面回复初始化状态

实现方法：

1、左右json格式如下：

left=[
  {"name": "一级","indexid": 1},
  {"name": "item1", "id": 1,"indexid": 2},
  {"name": "item2","id": 2,"indexid": 3},
  {"name": "二级","indexid": 4},
  {"name": "item3","id": 3,"indexid": 5},
  {"name": "item4","id": 4,"indexid": 6}
right=[
  {"name": "item8","id": 8,"indexid": 10},
  {"name": "item7","id": 7,"indexid": 9}
2、dom原始使用flex布局，拖拽时使用Vue.Draggable插件，
 
下载地址：https://github.com/SortableJS/Vue.Draggable#start-of-content
 
演示地址：https://sortablejs.github.io/Vue.Draggable/#/simple
 
3、一开始左边加载所有的items，右边加载展示的items，注意：左边要过滤掉（隐藏）右边有的items，参考filterComs（left,right）方法;
 
在渲染dom、移动、删除时，通过操作dom来实现展示与隐藏；
 
4、左边draggle插件，:group="{ name: 'dragobj', pull: 'clone', put: false}" 
 
{    name: 'dragobj'取相同名字的可以来回拖拽；pull: 'clone'从左向右克隆，后面用右边draggle插件的dragChangeR()方法让左侧数据隐藏了，left并不是真正的删除这条数据；put: false 禁止从右向左拖放数据   }
 
:move="checkMove" 移动时绑定checkMove方法，判断是上下还是向右移动，上下时，不执行拖拽；向右时，执行
 
5、右边draggle插件的deleteItme(element,index)方法实现删除时，right数据-1，左侧显示该条数据
 
6、【重置】时，重新调用this.filterComs(this.left,this.right);即可
 
7、问题：从左往右移动时，右侧一直会出现items的name值，拖拽结束后，name值消失，
 
解决方法：左右分别绑定一个v-bind="dragOptionsL"，v-bind="dragOptionsR"
 
8、问题：当右侧没有任何的items时，需要给右侧v-for循环的父元素指定一个min-height，否则从左侧拖到右侧时，没有接收的地方，则拖放失效
 
<template>
    <div class="box">
      <div class="dragset-msg">请将左侧内容拖到右侧进行配置</div>
      <!-- 1 左边指标 -->
      <draggable tag="ul" class="lul"
        v-bind="dragOptionsL"
        :move="checkMove"
        :list="left" 
        :group="{ name: 'dragobj', pull: 'clone', put: false}">
        <li v-for="element in left" :key="element.name" 
          :class="element.id?'dragindex':'dragtheme'" 
          :ref="`li${element.indexid}`">
          {{ element.name }}
      </draggable>
      <!-- 2 右边展示区 -->
      <draggable  tag="div" class="rconfig"
        group="dragobj"
        :list="right"
        v-bind="dragOptionsR"
        @change="dragChangeR"
        @start="drag = true"
        @end="drag = false">
        <transition-group type="transition" :name="!drag ? 'flip-list' : null" tag="ul" class="rul">
           <li class="showindex" v-for="(element,index) in right" :key="element.name" >
              {{ element.name }}
              <input type="button" class="btnindex" @click.stop="deleteItme(element,index)"> 
        </transition-group>
      </draggable>
</template>
<script>
import draggable from "vuedraggable";
import Vue from "vue";
export default {
  components: { draggable },
  data() {
    return {
      blnShowDlg: false,
      dlgType: "add", // 窗口类型
      titleName: "", // 窗口标题显示
      settingData: {}, //获取左右配置数据
      dataFormStore:{},//保存数据
      left:[],//左边数据
      right:[],//右边数据
      drag:false,
  computed: {
    dragOptionsL() {
      return {
        disabled: false,
        ghostClass: "ghostL"//注意：在左侧上下移动时，使用这个类；移动到右侧时，使用ghostR类！！！
    dragOptionsR() {
      return {
        animation: 500,
        disabled: false,
        ghostClass: "ghostR"//注意：在右侧上下移动时，使用这个类；
  methods: {
    /** 1、显示弹框 row不传为添加 传参为修改 */
    showDlg(row) {
      this.titleName = "页面配置";
      this.dlgType = "edit";
      this.blnShowDlg = true;
      this.dataFormStore =  this.$common.deepCopy(row);//存储原始数据
      this.left=row.left;
      this.right=row.right;
      this.restoreForm();
    // 2 左侧list移动，禁止在左侧上下移动
    checkMove(evt){
      let classObj=evt.to.className;
      if(evt.draggedContext.element.id===""){
        return false;
      }else if(classObj.indexOf("lul")>-1){
        return false;
    // 2.1 拖拽事件，添加时隐藏左侧添加的数据
    dragChangeR(evt) {
      if(evt.added){//这时候已经添加了
        this.$refs[`li${evt.added.element.indexid}`][0].style.display='none';
    // 3 删除
    deleteItme(element,index){
      this.right.splice(index,1);
      this.$refs[`li${element.indexid}`][0].style.display='block';
    // 4 取消
    closeDialog() {
      this.blnShowDlg = false;
    // 5 关闭
    hidDlg() {
      this.blnShowDlg = false;
    /** 6 修改-还原 */
    restoreForm() {
      this.left=this.$common.deepCopy(this.dataFormStore.left);
      this.right=this.$common.deepCopy(this.dataFormStore.right);
      this.filterComs(this.left,this.right);
    /** 7 添加/保存 */
    submitForm() {
      let newright=this.right;
      let rlens=this.right.length;
      if(rlens>0){
        let idArr=[];
        for(let i=0;i<rlens;i++){
          idArr.push(newright[i].indexid);
        this.$emit("doSaveRow",idArr);  // 把id数组传递过去
      }else{
        this.$HiAlert.showFail(this.$HiAlert.getMsgText("至少选择一个菜单"));
    // 8 过滤不显示的左侧item
    filterComs(left,right){
      if(right.length > 0){
        // 初始化，全置为blcok,后面根据right数据过滤显示
        for(let i=0;i< left.length;i++){
          this.$nextTick(() => {
            this.$refs[`li${left[i].indexid}`][0].style.display='block';
        for(let i=0;i< right.length;i++){
          let filteritem=left.filter((element,index,self)=>{
            return element.indexid==right[i].indexid;
            // 右侧有数据时，dom生成之后再来渲染，否则会报错：cannot read property '0' of undefined
          this.$nextTick(() => {
            this.$refs[`li${filteritem[0].indexid}`][0].style.display='none';
</script>
<style  lang="stylus" scoped>
//应用样式文件
.ghostL{
    opacity:0.5;
    width:230px;
.ghostR{
    opacity:0;
    width:230px;
</style>
                    功能描述：1、左边【一级、二级、三级】字样是不能拖拽的，【item1、item2...】可以拖拽2、左边items位置固定，只能向右拖拽，不能上下拖拽，如：item7从左边拖到右边，左边的item7消失，右边增加item73、右边items可以自由拖拽，但不能向左拖拽4、右边items可以删除，如：点击item7的“×”，右边item7消失，左边item7出现5、重置时，页...
  <vuedraggable v-model="list">
    <transition-group>
      <div v-for="item in list" :key="item" class="item">
       <van-button>{{item}}</van-button>
				
Vue.Draggable.Resizable：打造动态布局的前端利器
项目地址:https://gitcode.com/gorkys/vue-draggable-resizable
Vue.Draggable.Resizable 是一款基于 Vue.js 的轻量级组件，它允许用户在界面上拖动并调整元素的大小，为开发交互式、可定制的动态布局提供了强大且易用的工具。
Vue.Draggab...
				
本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下
主要使用vuedraggable和sortablejs两个组件。 
1、安装组件
npm install vuedraggable
npm install sortablejs
2、引入组件
import draggable from 'vuedraggable';
import Sortable from 'sortablejs';
export default {
  components: {
    draggable,
    Sortable
重用现有的UI库组件（例如 ， 或等），并使用tag和componentData道具使其可拖动
觉得这个项目有用吗？ 你可以给我买一个 :hot_beverage: 或一个 :beer_mug:
用npm或纱
yarn add vuedraggable@next
npm i -S vuedraggable@next
< script src =" //cdnjs.c
				
1 功能描述
使用vuedraggable实现从左边框中拖拽到右边的框中，左边的框不能随意拖拽改变位置，不能向左边框中拖拽组件。右边框中的组件可以拖动位置，但不能拖入到左边框里。
注意事项如下：
（1）draggable的group中的name属性必须一致；
（2）左边框中的draggable必须含有以下属性，group中的pull:'clone'属性表示可以生成新的组件；group中的put:false属性表示不能向里面拖拽组件；{sort: false}属性表示不能更改组件的位置。
（3...
				
使用 vuedraggable 实现拖拽排序功能效果展示实现步骤
vuedraggable 中文文档： https://www.itxst.com/vue-draggable/tutorial.html
实现步骤
npm install vuedraggable --save
组件中引入
import draggable from "vuedraggable";
components: {
  draggable,
组件中使用
<template>
VueDraggable 是一个专门解决拖拽排序和拖拽分组的前端开源代码库。
在 jQuery 的时代，有很多动效非常流畅丝滑的拖拽排序插件，但在国内 Vue.js 起来后，却比较难找到一款像 Sortable.js 那样的组件，而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强组件。
支持触摸设备，支持智能滚动；
支持拖拽和选择文本以及不同列表之间的拖拽；
拖拽和视图模型同步刷.
				
vue.draggable.vue是一个基于Vue.js的拖拽组件，它提供了一种简单的方式来实现元素的拖拽功能。通过使用vue.draggable.vue，你可以轻松地将元素拖动到指定的位置，并且可以自定义拖拽时的样式和行为。
该组件的主要特点包括：
1. 简单易用：vue.draggable.vue提供了简洁的API，使得拖拽功能的实现变得非常简单。
2. 支持多种拖拽方式：你可以通过鼠标点击、触摸屏幕或者键盘操作来进行拖拽。
3. 自定义样式：你可以自定义拖拽时的样式，包括拖拽时的透明度、边框样式等。
4. 事件支持：vue.draggable.vue提供了多种事件，如拖拽开始、拖拽结束等，方便你在相应的事件中执行自定义的逻辑。
使用vue.draggable.vue时，你需要先安装该组件，并在Vue实例中引入它。然后，你可以在模板中使用该组件，并通过绑定数据来控制元素的位置和样式。