vue.draggable一款基于vue的拖拽插件

半仙儿~

已于 2024-03-29 17:06:51 修改

阅读量2.9k

点赞数 1

分类专栏： vue 文章标签： javascript 开发语言 vue

于 2023-06-15 18:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_42941628/article/details/131233890

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

官网入口：vue.draggable一款基于vue的拖拽插件 - itxst.com

1、当鼠标落在handle(.mover)指定的元素上面时才允许拖动

属性名称	默认值	说明
handle	空	指定可拖动元素的样式名称

<draggable v-model="arr1"  handle=".mover"  animation="300">
   <transition-group>
      <div class="item" v-for="item in arr1" :key="item.id">
        {{item.name}}
        <span class="mover">+</span>
      </div>
   </transition-group>
 </draggable>

2、嵌套拖拽，group设置相同的值，可实现父元素和子元素相互拖拽。

<draggable v-model="arr1" :disabled="disabled" animation="300" @start="onStart" @end="onEnd" draggable=".drag-area">
    <div class="item drag-area" v-for="item in arr1" :key="item.id">
        <span class="mover">+</span>
        <draggable v-model="arr2" :disabled="disabled" animation="300" @start="onStart" @end="onEnd"
            draggable=".drag-area">
            <button class="drag-area" v-for="item in arr2">{{ item.id}}</button>
        </draggable>
    </div>
</draggable>

3、属性说明

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

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.draggable例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <style scoped>
         .item {padding: 6px; background-color: #fdfdfd; border: solid 1px #eee;
            margin-bottom: 10px; cursor: move;}
          .item:hover { background-color: #f1f1f1; cursor: move;}
          .chosen {border: solid 2px #3089dc !important; }
    </style>
</head>
<body style="padding:10px;">
    <div id="app">
        <div>{{drag?'拖拽中':'拖拽停止'}}</div>
        <draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
            <transition-group>
                <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
            </transition-group>
        </draggable>
    </div>
    <script>
        //单组件注册import draggable from "vuedraggable";
        // 全局注册组件
        Vue.component('vuedraggable', window.vuedraggable)
        var app = new Vue({
            el: '#app',
            components: {
                vuedraggable: window.vuedraggable,//当前页面注册组件
            },
            data() {
                return {
                    drag: false,
                    myArray: [
                        { people: 'cn', id: 1, name: 'www.itxst.com' },
                        { people: 'cn', id: 2, name: 'www.baidu.com' },
                        { people: 'cn', id: 3, name: 'www.taobao.com' },
                        { people: 'us', id: 4, name: 'www.google.com' }
                    ]
                };
            },
            methods: {
                onStart() {
                    this.drag = true;
                },
                onEnd() {
                    this.drag = false;
                }
            }
        });
    </script>
</body>
</html>