vue拖拽排序插件vuedraggable使用方法详解


Posted in Javascript onAugust 21, 2020

大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入

首先在vue项目中,用npm包下载下来

npm install vuedraggable -S

下载下来后,引入插件,在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

别忘了下面要注册组件

components: {
 draggable
},

然后就可以在template标签里面使用了

<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
   <transition-group>
    <div v-for="element in colors" :key="element.text" class = "drag-item">
     {{element.text}}
    </div>
   </transition-group>
 </draggable>

下面贴一下详细用法

<template>
 <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
   <transition-group>
    <div v-for="element in colors" :key="element.text" class = "drag-item">
     {{element.text}}
    </div>
   </transition-group>
 </draggable>
</template>

<script>
 import draggable from 'vuedraggable'
 export default{
  data(){
   return{
    msg:"这是测试组件",
    colors: [
     {
      text: "Aquamarine",
     }, 
     {
      text: "Hotpink",
     }, 
     {
      text: "Gold",
     }, 
     {
      text: "Crimson",
     }, 
     {
      text: "Blueviolet",
     },
     {
      text: "Lightblue",
     }, 
     {
      text: "Cornflowerblue",
     }, 
     {
      text: "Skyblue",
     }, 
     {
      text: "Burlywood",
     }
    ],
    startArr:[],
    endArr:[],
    count:0,
   }
  },
  components: {
  draggable
  },
  methods:{
   getdata (evt) {
    console.log(evt.draggedContext.element.text)
   },
   datadragEnd (evt) {
    evt.preventDefault();
    console.log('拖动前的索引 :' + evt.oldIndex)
    console.log('拖动后的索引 :' + evt.newIndex)
    console.log(this.colors);
   }
  },
  mounted () {
   //为了防止火狐浏览器拖拽的时候以新标签打开,此代码真实有效
   document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
   }
  }
 }
</script>

<style lang="scss" scoped>
 .test{
  border:1px solid #ccc;
 }
 .drag-item{
  width: 200px;
  height: 50px;
  line-height: 50px;
  margin: auto;
  position: relative;
  background: #ddd;
  margin-top:20px;
 }
 .ghostClass{
  opacity: 1;
 }
 .bottom{
  width: 200px;
  height: 50px;
  position: relative;
  background: blue;
  top:2px;
  left: 2px;
  transition: all .5s linear;
 }
</style>

下面是结果

vue拖拽排序插件vuedraggable使用方法详解

上下是可以拖动的,只是截图的话看不出效果来,小伙伴们注意了,里面有个options选项,这个选项怎么来的呢,据我观察这个插件是基于sortable.js,所以这个options里面的配置,和sortable.js是一样的,下面我贴两个地址,一个是vuedraggable的GitHub地址,一个是sortable.js的GitHub地址

vuedraggable: 学习地址

sortable.js:学习地址

options配置如下

var sortable = new Sortable(el, {
 group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
 sort: true, // sorting inside list
 delay: 0, // time in milliseconds to define when the sorting should start
 touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
 disabled: false, // Disables the sortable if set to true.
 store: null, // @see Store
 animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
 handle: ".my-handle", // Drag handle selector within list items
 filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
 preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
 draggable: ".item", // Specifies which items inside the element should be draggable
 ghostClass: "sortable-ghost", // Class name for the drop placeholder
 chosenClass: "sortable-chosen", // Class name for the chosen item
 dragClass: "sortable-drag", // Class name for the dragging item
 dataIdAttr: 'data-id',

 forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

 fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
 fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
 fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.

 scroll: true, // or HTMLElement
 scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
 scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
 scrollSpeed: 10, // px

 setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
  dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
 },

 // Element is chosen
 onChoose: function (/**Event*/evt) {
  evt.oldIndex; // element index within parent
 },

 // Element dragging started
 onStart: function (/**Event*/evt) {
  evt.oldIndex; // element index within parent
 },

 // Element dragging ended
 onEnd: function (/**Event*/evt) {
  var itemEl = evt.item; // dragged HTMLElement
  evt.to; // target list
  evt.from; // previous list
  evt.oldIndex; // element's old index within old parent
  evt.newIndex; // element's new index within new parent
 },

 // Element is dropped into the list from another list
 onAdd: function (/**Event*/evt) {
  // same properties as onEnd
 },

 // Changed sorting within list
 onUpdate: function (/**Event*/evt) {
  // same properties as onEnd
 },

 // Called by any change to the list (add / update / remove)
 onSort: function (/**Event*/evt) {
  // same properties as onEnd
 },

 // Element is removed from the list into another list
 onRemove: function (/**Event*/evt) {
  // same properties as onEnd
 },

 // Attempt to drag a filtered element
 onFilter: function (/**Event*/evt) {
  var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
 },

 // Event when you move an item in the list or between lists
 onMove: function (/**Event*/evt, /**Event*/originalEvent) {
  // Example: http://jsbin.com/tuyafe/1/edit?js,output
  evt.dragged; // dragged HTMLElement
  evt.draggedRect; // TextRectangle {left, top, right и bottom}
  evt.related; // HTMLElement on which have guided
  evt.relatedRect; // TextRectangle
  originalEvent.clientY; // mouse position
  // return false; — for cancel
 },

 // Called when creating a clone of element
 onClone: function (/**Event*/evt) {
  var origEl = evt.item;
  var cloneEl = evt.clone;
 }
});

好了,今天的介绍就到这里啦,快去试试吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript cookies操作集合
Apr 12 Javascript
javascript new fun的执行过程
Aug 05 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
vue内置指令详解
Apr 03 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
JS实现图片拖拽交换效果
Nov 30 #Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 #Javascript
jQuery实现网页拼图游戏
Apr 22 #jQuery
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 #Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 #Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 #Javascript
You might like
php相对当前文件include其它文件的方法
2015/03/13 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
react实现同页面三级跳转路由布局
2019/09/26 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python的UTC时间转换讲解
2019/02/26 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
项目资料员岗位职责
2013/12/10 职场文书
公务员转正考察材料
2014/02/07 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
具结保证书范本
2015/05/11 职场文书
刑事法律意见书
2015/06/04 职场文书
新年寄语2016
2015/08/17 职场文书
Django migrate报错的解决方案
2021/05/20 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL