vuedraggable:vue拖拽排序插件

来源:http://www.chinese-glasses.com 作者:Web前端 人气:76 发布时间:2020-04-15
摘要:单个组件 最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,

单个组件

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

时间: 2019-09-30阅读: 347标签: 插件

import draggable from 'vuedraggable'
npm install vuedraggable -S

下面贴一下详细用法

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

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

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

components: { draggable},
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

别忘了下面要注册组件

options配置如下

var sortable = new Sortable(el, {group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }sort: true, // sorting inside listdelay: 0, // time in milliseconds to define when the sorting should starttouchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag eventdisabled: false, // Disables the sortable if set to true.store: null, // @see Storeanimation: 150, // ms, animation speed moving items when sorting, `0` — without animationhandle: ".my-handle", // Drag handle selector within list itemsfilter: ".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 draggableghostClass: "sortable-ghost", // Class name for the drop placeholderchosenClass: "sortable-chosen", // Class name for the chosen itemdragClass: "sortable-drag", // Class name for the dragging itemdataIdAttr: 'data-id',forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick infallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallbackfallbackOnBody: false, // Appends the cloned DOM Element into the Document's BodyfallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.scroll: true, // or HTMLElementscrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrollingscrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.scrollSpeed: 10, // pxsetData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent},// Element is chosenonChoose: function (/**Event*/evt) {evt.oldIndex; // element index within parent},// Element dragging startedonStart: function (/**Event*/evt) {evt.oldIndex; // element index within parent},// Element dragging endedonEnd: function (/**Event*/evt) {var itemEl = evt.item; // dragged HTMLElementevt.to; // target listevt.from; // previous listevt.oldIndex; // element's old index within old parentevt.newIndex; // element's new index within new parent},// Element is dropped into the list from another listonAdd: function (/**Event*/evt) {// same properties as onEnd},// Changed sorting within listonUpdate: 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 listonRemove: function (/**Event*/evt) {// same properties as onEnd},// Attempt to drag a filtered elementonFilter: function (/**Event*/evt) {var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.},// Event when you move an item in the list or between listsonMove: function (/**Event*/evt, /**Event*/originalEvent) {// Example: ?js,outputevt.dragged; // dragged HTMLElementevt.draggedRect; // TextRectangle {left, top, right и bottom}evt.related; // HTMLElement on which have guidedevt.relatedRect; // TextRectangleoriginalEvent.clientY; // mouse position// return false; — for cancel},// Called when creating a clone of elementonClone: function (/**Event*/evt) {var origEl = evt.item;var cloneEl = evt.clone;}});
el-row :gutter="24" el-col :span="12" el-form-item label="对外产品名称" el-input v-model="proAttribute.description" placeholder="对外产品名称" /el-input /el-form-item el-form-item label="对外产品属性" 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 /el-form-item /el-col el-col :span="12" el-form-item label="对内产品名称" el-input v-model="proAttribute.description" placeholder="对内产品名称" /el-input /el-form-item el-form-item label="对内产品属性" 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 /el-form-item /el-col /el-row
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/templatescript 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(); } } }/scriptstyle 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

2个组件左右结构

本文由10bet发布于Web前端,转载请注明出处:vuedraggable:vue拖拽排序插件

关键词:

频道精选

最火资讯