Vue.Draggable使用

没理由的花呗

已于 2022-03-19 10:24:21 修改

阅读量699

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-01-03 08:30:00 首次发布

本文链接：https://blog.csdn.net/m0_37296026/article/details/122189521

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue.Draggable

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。

安装使用

1、npm或yarn安装方式：

yarn add vuedraggable

npm i -S vuedraggable

2、使用方式：

简单使用：
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
    <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

import draggable from 'vuedraggable'
export default {
components: {
      draggable,
}

3、配置属性：

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

**4、示例地址：**https://sortablejs.github.io/Vue.Draggable

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuedraggable</title>
    <script src="vue.js"></script>
    <script src="Sortable.min.js"></script>
    <script src="vuedraggable.umd.min.js"></script>
    <style>
        .fd-div,
        .item {
            float: left;
            width: 200px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 基础使用 -->
        <draggable v-model="myArray">
            <div class="fd-div" v-for="element in myArray" :key="element.id">{{element.name}}</div>
        </draggable>
        <!-- 与transition-group -->
        <!-- <draggable v-model="myArray">
            <transition-group>
                <div  class="fd-div"  v-for="element in myArray" :key="element.id">
                    {{element.name}}
                </div>
            </transition-group>
        </draggable> -->
        <!-- 插槽方式  支持 footer/header -->
        <!-- <draggable v-model="myArray" draggable=".item">
            <div v-for="element in myArray" :key="element.id" class="item">
                {{element.name}}
            </div>
            <button slot="footer">Add</button>
        </draggable> -->

        <div>{{myArray}}</div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                myArray: [{
                    name: '测试1',
                    id: 1,
                }, {
                    name: '测试2',
                    id: 2,
                }, {
                    name: '测试3',
                    id: 3,
                }, {
                    name: '测试4',
                    id: 4,
                }]
            }
        })
    </script>
</body>

</html>

没理由的花呗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.Draggable使用

作者内容时间JJVue-拖拽插件20220103Vue.Draggable Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。安装使用1、npm或yarn安装方式：yarn add...
复制链接

扫一扫

专栏目录