VUE 拖拽组件 vue.draggable

中文文档

https://www.itxst.com/vue-draggable/tutorial.html

安装

npm i -S vuedraggable

属性

属性名称	说明
group	:group= “name”，相同的组之间可以相互拖拽
sort	:sort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序
delay	:delay= “0”, 鼠标按下后多久可以拖拽
touchStartThreshold	鼠标移动多少px才能拖动元素
disabled	:disabled= “true”,是否启用拖拽组件
animation	拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handle	:handle=“.mover” 只有当鼠标移动到css为mover类的元素上才能拖动
filter	:filter=“.unmover” 设置了unmover样式的元素不允许拖动
draggable	:draggable=“.item” 那些元素是可以被拖动的
ghostClass	:ghostClass=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosenClass	:chosenClass=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dragClass	:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dataIdAttr	dataIdAttr: ‘data-id’
forceFallback	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
fallbackClass	默认false，克隆的DOM元素的类名
allbackOnBody	默认false，克隆的元素添加到文档的body中
fallbackTolerance	拖拽之前应该移动的px
scroll	默认true,有滚动区域是否允许拖拽
scrollFn	滚动回调函数
scrollSensitivity	距离滚动区域多远时，滚动滚动条
scrollSpeed	滚动速度

引用

import draggable from "vuedraggable";
export default {
	components: {
		draggable
	}
}

案例

单列拖动

<template>
  <div class="draggable">
    <!-- delay按下多少才能拖动，防止用户误操作，单位ms -->
    <!-- animation 过渡的一个效果，不设置的话，体验效果是特别差的  -->
    <!-- ghostClass="ghostClass 设置拖动元素的占位符类名-->
    <!-- ghostClass="hostClass" 被选中目标的样式-->
    <!-- dragClass="dragClass" -->
    <draggable delay="1000" animation="1000" forceFallback="true" ghostClass="ghostClass" chosenClass="hostClass" dragClass="dragClass">
      <transition-group>
        <div class="item" v-for="item in list" :key="item.id">{{item.name}}</div>
      </transition-group>
    </draggable>
  </div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      list: [
        { id: 1, name: "www.itxst.com" },
        { id: 2, name: "www.jd.com" },
        { id: 3, name: "www.ebay.com" },
      ],
    };
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
  },
};
</script>
<style scoped>
.draggable{
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  left: 50%;
  transform: translateX(-50%);
}
.item{
  box-sizing: border-box;
  width: 100%;
  padding: 7px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  cursor: pointer;
}
.ghostClass{
  border: 2px solid yellow !important;
}
.hostClass{
  background-color: pink !important;
}
.dragClass{
  font-size: 24px;
}
</style>

多列拖动

:group= “name”，相同的组之间可以相互拖拽 name最好是动态，在结合vue.draggable的事件可以实现更好的多列拖动效果

vue.draggable事件列表

事件名称	说明
start	开始拖动时触发的事件
add	从一个数组拖拽到另外一个数组时触发的事件
remove	移除事件
update	拖拽变换位置时触发的事件
end	拖拽完成时的事件
choose	鼠标点击选中要拖拽元素时的事件
unchoose	选中后松开鼠标的事件
sort	位置变化时的事件
clone	从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素

A、B列可以相互拖动，A、C列也可以相互拖动,B、C列无法拖动,且B列只能有一个元素

<template>
  <div>
    <div>
      <span>A、B列可以相互拖动，A、C列也可以相互拖动,B、C列无法拖动,且B列只能有一个元素</span>
    </div>
    <div class="itxst">
      <div class="col">
        <div class="title">A列</div>
        <!-- 设置固定宽高的原因在于如果没有元素的话高度为0是拖不进元素的 -->
        <draggable
          v-model="arr1"
          :group="name1"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @add="onadd"
          style="width: 100%; height: 80%;overflow-y: auto;"
        >
          <div class="item" v-for="item in arr1" :key="item.id">
            {{ item.name }}
          </div>
        </draggable>
      </div>
      <div class="col">
        <div class="title">B列</div>
        <draggable
          v-model="arr2"
          :group="name2"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @start="onStart"
          @add="onadd"
          style="width: 100%; height: 80%;overflow-y: auto;"
        >
          <div class="item" v-for="item in arr2" :key="item.id">
            {{ item.name }}
          </div>
        </draggable>
      </div>
      <div class="col">
        <div class="title">C列</div>
        <draggable
          v-model="arr3"
          :group="name3"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @add="onadd"
          style="width: 100%; height: 80%;overflow-y: auto;"
        >
          <div class="item" v-for="item in arr3" :key="item.id">
            {{ item.name }}
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      name1:'a',
      name2:'a',
      name3:'a',
      //定义要被拖拽对象的数组
      arr1: [
        { id: 1, name: "www.itxst.com" },
        { id: 2, name: "www.jd.com" },
        { id: 3, name: "www.baidu.com" },
        { id: 4, name: "www.taobao.com" },
        { id: 5, name: "www.itxst.com" },
        { id: 6, name: "www.jd.com" },
        { id: 7, name: "www.baidu.com" },
        { id: 8, name: "www.taobao.com" },
        { id: 9, name: "www.itxst.com" },
        { id: 10, name: "www.jd.com" },
        { id: 11, name: "www.baidu.com" },
        { id: 12, name: "www.taobao.com" },
      ],
      arr2: [
      ],
      arr3: [
      ],
    };
  },
  methods: {
    onadd() {
      if(this.arr2.length!= 0){
        this.name2 = 'b'
      }else{
        this.name2 = 'a'
      }
    },
    onStart(){
      this.name2 = 'a'
    }
  },
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: blue !important;
}
.chosenClass {
  background-color: red !important;
  opacity: 1 !important;
}
.dragClass {
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.itxst {
  margin: 10px;
}
.title {
  padding: 6px 12px;
}
.col {
  width: 40%;
  height: 400px;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}
.col + .col {
  margin-left: 10px;
}

.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}
.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}
.item + .item {
  border-top: none;
  margin-top: 6px;
}
</style>