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 Event事件学习第一章 Event介绍
Feb 07 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
js动态添加带圆圈序号列表的实例代码
Feb 18 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中与数组相关的函数
2007/03/22 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
详解django三种文件下载方式
2018/04/06 Python
Python Django基础二之URL路由系统
2019/07/18 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
智能钱包:Ekster
2019/11/21 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
根叔历年演讲稿
2014/05/20 职场文书
中药学专业求职信
2014/05/31 职场文书
体育课外活动总结
2014/07/08 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
干部考核工作总结
2015/08/12 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis