vue.draggable浅尝

这篇具有很好参考价值的文章主要介绍了vue.draggable浅尝。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

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

官方网站 

https://github.com/SortableJS/Vue.Draggable

npm或yarn 安装方式

yarn add vuedraggable
npm i -S vuedraggable 

UMD浏览器直接引用JS方式

<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>

属性说明

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

完整例子

html

<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>

css 

.item {
    padding: 6px;
    background-color: #fdfdfd;
    border: solid 1px #eee;
    margin-bottom: 10px;
    cursor: move;
    &:hover {
      background-color: #f1f1f1;
      cursor: move;
    }
}

.chosen {
  border: solid 2px #3089dc !important;
}

js 

// 全局注册组件
new Vue({
  el: '#app',
  data() {
    return {
      drag: false,
      myArray: [
        { people: 'cn', id: 1, name: 'www.itxst.com',sort: false },
        { 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;
    }
  }
})

成果

vue.draggable浅尝,vue,vue.js,前端

在线尝试

两列或多列之间相互拖动

vue.draggable作为一款强大的vue拖拽组件,可以满足呢对网页上元素的拖拽需求,本文将介绍两两列或多列之间相互拖动,比如把某些角色或用户拖拽到每个权限组实现一些比较炫酷的效果。 

vue.draggable浅尝,vue,vue.js,前端 

关键点group属性

//两列组件设置相同的group名就可以相互拖拽了
<draggable v-model="arr1" group="site">
    <transition-group>
     <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>

//group属性:
//设置方式一,直接设置组名
group:'itxst'
//设置方式,object,也可以通过自定义函数function实现复杂的逻辑
group:{
    name:'itxst',//组名为itxst
    pull:true|false|function,//是否允许拖入当前组
    put:true|false|function,//是否允许拖出当前组
}

在线试一试

拖入空数组的问题

//当有个数组为空时,需要设置 transition-group 的高度才能拖入这个空数组
//style 等于 min-height:120px;display: block;
 <draggable v-model="arr2" group="site" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group :style="style">
     <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>

在线试一试

控制A组只能拖出不能拖入

 <draggable v-model="arr1" :group="grpupA"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group :style="style">
     <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
//设置:group="grpupA"只能拖出
 grpupA:{
        name:'site',
        pull:true,
        put:false
 }

在线试一试

完整代码

<template>
  <div> 
<!--使用draggable组件-->
<div class="itxst">
<div class="col">
  <div class="title" >把下面元素拖拽到B组试试看</div>
 <draggable v-model="arr1" :group="groupA"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group :style="style">
     <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
 <div  class="col">
    <div class="title" >B组(本组是个空数组)</div>
 <draggable v-model="arr2" :group="groupB" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group :style="style">
     <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
  </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return {
      drag:false,
      groupA:{
        name:'site',
        pull:true, //可以拖从
        put:true//可以拖出
      },
       groupB:{
        name:'site',
        pull:true,
        put:true
      },
      //定义要被拖拽对象的数组
      arr1:[
        {id:1,name:'www.itxst.com'},
        {id:2,name:'www.jd.com'},
        {id:3,name:'www.baidu.com'},
        {id:3,name:'www.taobao.com'}
        ],
        arr2:[], //空数组
        //空数组之在的样式,设置了这个样式才能拖入
        style:'min-height:120px;display: block;'
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</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%;
  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>

 参考文档

vue.draggable中文文档 - itxst.com文章来源地址https://www.toymoban.com/news/detail-649161.html

到了这里,关于vue.draggable浅尝的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3使用拖拽组件draggable.next的使用教程【保姆级】

    环境:vue3+setup语法 首先放官方文档的链接: 中文版本: vue.draggable.next 中文文档 - itxst.com (民间翻译) 英文版本:GitHub - SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js 因为自己写的过程中,官方文档和网上的资料都非常不明,使用版本各不相同,极

    2024年02月01日
    浏览(41)
  • 低代码开发之vue.draggable的使用(进阶:组件化拖拽生成功能页面)

    效果展示: 前言:随着各公司定制化需求的不断攀升,公司对低代码、组态化的开发需求日渐迫切。也许是研发任务节点将至,也许是为顺应时代潮流,我也是去学习并实践了一番。如图所示。 功能简介: 左侧组件区域特意做了选中态,小眼睛预览浮框态等交互,右侧内容区

    2024年03月23日
    浏览(53)
  • 低代码开发之vue.draggable的使用(初阶:组件化拖拽生成简单页面)

    效果展示 vue.draggable 安装 使用 vue.draggable 相关属性 事件 Demo完整代码 更多详见draggable官网=https://www.itxst.com/vue-draggable/tutorial.html

    2024年02月19日
    浏览(40)
  • 前端开发 5: Vue.js 框架

    在前端开发中,Vue.js 是一个流行且灵活的 JavaScript 框架,用于构建用户界面。它采用了组件化的开发方式,使得前端开发更加模块化和可维护。在本篇博客中,我将为你介绍 Vue.js 的基础知识和常用技巧,帮助你更好地掌握前端开发中的框架部分。 Vue.js 是一个轻量级的 Jav

    2024年01月19日
    浏览(45)
  • vue.js前端框架应用案例

    Vue.js 是一种流行的前端框架,它可以帮助开发者构建单页应用(SPA)和复杂的用户界面。以下是几个 Vue.js 的案例,涵盖了不同领域的应用: Vue.js 官方文档 :Vue.js 的官方文档本身就是一个使用 Vue.js 构建的项目。它展示了 Vue.js 的各种功能和最佳实践,包括组件、指令、混

    2024年02月21日
    浏览(50)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(64)
  • Vue.js 现代前端开发的利器

    作者:阿发家的阿花 在当今的前端开发领域,Vue.js已经成为最受欢迎的JavaScript框架之一。它的简洁性、灵活性和强大的功能使其成为许多开发者首选的工具。本文将介绍Vue.js的核心概念、主要特点以及为什么它在现代前端开发中如此重要。我们还将探讨Vue.js在构建交互式和

    2024年02月10日
    浏览(51)
  • 前端埋点需求(vue.js)

    提示:基于运营活动的需求,需要对用户行为进行埋点监控,因此以下文章是代码埋点的实现。 前端埋点有两种:全局埋点、代码埋点。 全局埋点 :收集的用户所有行为,但是收集的数据驳杂,要进行处理。 代码埋点 :收集的用户所有行为更加精准,能够进行更细节的处

    2023年04月13日
    浏览(43)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)
  • 《Vue.js前端开发实战》课后习题答案

    本答案仅供参考,禁止用于抄袭等不法用途 一、 填空题 用户界面 ViewModel refs vue-devtools 组件 二、 判断题 对 对 对 对 对 三、 选择题 D C D A A 四、 简答题 请简述什么是Vue。 Vue(读音/Vjuː/,类似于View)是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计

    2024年02月03日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包