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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php查看网页源代码的方法
2015/03/13 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python实现图片插入文字
2019/11/26 Python
如何提高python 中for循环的效率
2020/04/15 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
测绘工程本科生求职信
2013/10/10 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
集中采购方案
2014/06/10 职场文书
万能检讨书2000字
2014/10/17 职场文书
考试作弊检讨书
2015/01/27 职场文书
超级礼物观后感
2015/06/15 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电