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 相关文章推荐
jquery实现table鼠标经过变色代码
Sep 25 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
vue中英文切换实例代码
Jan 21 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Python常用库推荐
2016/12/04 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Django choices下拉列表绑定实例
2020/03/13 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
党的生日活动方案
2014/08/15 职场文书
高中学生自我评价范文
2014/09/23 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
鲁迅故里导游词
2015/02/05 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
应急管理工作总结2015
2015/05/04 职场文书
公司车辆管理制度
2015/08/04 职场文书