vue中draggable使用记录

NPM或yarn安装方式

yarn add vuedraggable
npm i -S vuedraggable

UMD浏览器直接引用JS方式

属性说明

如果下面的属性说明未能完全看明白，请访问非vue版 sortable.js里面有更详细的例子。asfa

属性名称	说明
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	滚动速度

摘录：https://blog.csdn.net/qq_39928481/article/details/124453043

DEMO
<template>
  <div class="twoPage"> 
      <div class="el-row">
        <div class="el-col" :span="12">
          <h3>Draggable 1</h3>
          <draggable class="list-group" :list="list1" group="people" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>

        <div class="el-col" :span="12">
          <h3>Draggable 2</h3>
          <draggable class="list-group" :list="list2" group="people" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
     list1: [
        { name: "list1 - 1:John", id: 1 },
        { name: "list1 - 2:Joao", id: 2 },
        { name: "list1 - 3:Jean", id: 3 },
        { name: "list1 - 4:Gerard", id: 4 }
      ],
      list2: [
        { name: "list2 - 1:Juan", id: 5 },
        { name: "list2 - 2:Edgard", id: 6 },
        { name: "list2 - 3:Johnson", id: 7 }
      ]
    };
  },
  components:{
    draggable
  },
  mounted() {
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    }
  }
};
</script>
<style lang="less">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item{
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  }
}
</style>

options配置项，
sort:false 表示拖动时禁止其进行排序操作
group: {name: ‘field’, pull: ‘clone’, put: false} 表示进行克隆拖动操作，并且该name和拖动的目标位置group名称一致，如右侧draggable标签的group同样为field
draggable=“.item” 将可拖动属性下放到每一个按钮下

拖拽（克隆）

<template>
  <div class="twoPage"> 
      <div class="el-row">
        <div class="el-col" :span="12">
          <h3>Draggable 1</h3>
          <draggable class="list-group" :list="list1" :group="{ name: 'people', pull: 'clone', put: true }" @change="log" :clone="cloneDog">
            <div
              class="list-group-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>

        <div class="el-col" :span="12">
          <h3>Draggable 2</h3>
          <draggable class="list-group" :list="list2" :group="{ name: 'people', pull: 'clone', put: true }" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
     list1: [
        { name: "list1 - 1:John", id: 1 },
        { name: "list1 - 2:Joao", id: 2 },
        { name: "list1 - 3:Jean", id: 3 },
        { name: "list1 - 4:Gerard", id: 4 }
      ],
      list2: [
        { name: "list2 - 1:Juan", id: 5 },
        { name: "list2 - 2:Edgard", id: 6 },
        { name: "list2 - 3:Johnson", id: 7 }
      ]
    };
  },
  components:{
    draggable
  },
  mounted() {
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    },
    cloneDog({ id }) {
      return {
        id: 8,
        name: 'cat'
      };
    }
  }
};
</script>
<style lang="less">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item{
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  }
}
</style>

posted @ 2024-02-29 17:30 世界的尽头就是打工人阅读(154) 评论(0) 编辑收藏举报

刷新页面返回顶部

shengjiangMock

vue中draggable使用记录

NPM或yarn安装方式

UMD浏览器直接引用JS方式

属性说明

公告