vue通过draggable实现拖拽功能

news2024/11/21 0:33:23

1. 官方文档

2. 安装

```
yarn add vuedraggable  
npm i -S vuedraggable
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
```

3. 其他组件：

sortablejs.js拖拽
非官网文档

    npm install sortablejs --save
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>

4.属性说明

属性名称	说明
group	:group= “name”，相同的组之间可以相互拖拽或者 { name: “…”, pull: [true, false, ‘clone’, array , function], put: [true, false, array , function] }
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	:ghostClass=“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	滚动速度

5.案例：

<template>
  <div>
    <!-- handle=".mover" mover的calss才可以拖动 -->
    <!-- draggable=".moveItem" moveItem的calss才可以换位置 -->
    <!-- filter=".undraggable" undraggable的class禁止拖拽 -->
    <!--  group="people" people这一组里面的可以拖拽 -->
    <draggable v-model="myArray" chosen-class="chosen" force-fallback="true" handle=".mover" draggable=".moveItem" filter=".undraggable" group="people" animation="1000">
      <transition-group>
        <div v-for="element in myArray" :key="element.id" class="item" :class="[element.class]">
          <div v-if="element.class=='moveItem'" class="btnMove mover" />
          <div v-else class="btnMove1" />
          <div>{{ element.name }}</div>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  data() {
    return {
      myArray: [
        { people: 'cn', id: 1, name: 'www.itxst.com', class: 'moveItem' },
        { people: 'cn', id: 2, name: 'www.baidu.com', class: 'moveItem' },
        { people: 'cn', id: 3, name: 'www.taobao.com', class: 'moveItem' },
        { people: 'us', id: 4, name: 'www.google.com', class: 'undraggable' }
      ]
    }
  },
  watch: {
    myArray(value) {
      console.log(value)
    }
  }
}
</script>
<style lang="scss" scoped>
.item{
    cursor: pointer;
    line-height: 30px;
    display: flex;
    align-items: center;
    user-select: none;
    margin-top: 10px;
    .btnMove{
      width: 30px;
      height: 40px;
      background-image: url('~@/assets/img/moverImg.png');
      background-repeat: no-repeat;
      background-position: center center;
      cursor: move;
      display: inline-block;
  }
  .btnMove1{
    width: 30px;
    height: 40px;
    display: inline-block;
  }
}
</style>