使用vuedraggable实现拖拽排序功能

一时失言乱红尘 2023-06-27 06:13 29阅读 0赞

> # 最近项目中要使用到拖拽功能，于是使用了[vuedraggable][]快速实现，简单记录下使用方法备忘（此插件和[sortable.js][]和[awe-dnd][]很相似） #

> ### 1、安装插件： ###
> 
>  
> 
>     cnpm i vuedraggable -save
> 
> ### 2、引入 ###
> 
>     import draggable from 'vuedraggable'
> 
> ### 3、使用 ###
> 
> html部分
> 
>     <draggable v-model="list" @update="datadragEnd" :options = "{animation:500}" >
>                 <transition-group  class="flex">
>                         <div v-for="(item,index) in list" :key="index" class = "drag-item">
>                             {
>         {item.text}}
>                         </div>   
>                 </transition-group>
>      </draggable>
> 
> js部分
> 
>     data(){
>             return{
>                 colors: [
>                         {
>                             text: "0",
>                         }, 
>                         {
>                             text: "1",
>                         }, 
>                         {
>                             text: "2",
>                         }, 
>                         {
>                             text: "3",
>                         }, 
>                         {
>                             text: "4",
>                         },
>                         {
>                             text: "5",
>                         }, 
>                         {
>                             text: "6",
>                         }, 
>                         {
>                             text: "7",
>                         }, 
>                         {
>                             text: "8",
>                         }
>                 ],
>             }
>         },
>         methods:{
>             datadragEnd (evt) {
>                     // evt.preventDefault();
>                     console.log(evt);
>                     // let oldIndex = evt.oldIndex;
>                     // let newIndex = evt.newIndex;
>                    
>     
>                  
>                     console.log(this.colors);
>             },
>         },
>         mounted () {
>     	        //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
>                 document.body.ondrop = function (event) {
>                     event.preventDefault();
>                     event.stopPropagation();
>                 }
>             }
> 
> css部分
> 
>     .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;
>         }
> 
>

> ###  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;
>     	}
>     });
> 
> 最后引入一个写的比较齐全的博客：[https://blog.csdn.net/zjiang1994/article/details/79809687][https_blog.csdn.net_zjiang1994_article_details_79809687]

[vuedraggable]: https://github.com/SortableJS/Vue.Draggable
[sortable.js]: https://github.com/SortableJS/Sortable
[awe-dnd]: https://www.npmjs.com/package/awe-dnd
[https_blog.csdn.net_zjiang1994_article_details_79809687]: https://blog.csdn.net/zjiang1994/article/details/79809687