DDR爱好者之家 Design By 杰米
大家好,最近做的项目要用到拖拽排序,我现在的项目是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>
下面是结果
上下是可以拖动的,只是截图的话看不出效果来,小伙伴们注意了,里面有个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; } });
好了,今天的介绍就到这里啦,快去试试吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路