Received a new request ==> swimlane map, something like this:

The page is relatively simple, mainly a card drag function, so I directly use vueDraggable plug-in, the official website is here, vuue.Draggable is a Vue drag plug-in based on sortable. js. Mobile device support, drag and drop and select text, intelligent scrolling, drag and drop between lists, no jQuery based, vue2 transition animation compatibility, undo support, a very good vUE drag component.

configuration

As with other plug-ins, first install:

npm i -S vuedraggable
Copy the code

The page introduce

import draggable from 'vuedraggable'
Copy the code

Use (for a complete example)

<template> <div> <div>{{drag? 'dragging ':' dragging stopped '}}</div> <! <draggable V-model ="myArray" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd"> <transition-group> <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div> </transition-group> </draggable> </div> </template> <style scoped  .item { padding: 6px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; cursor: move; } /* Select style */. Chosen {border: solid 2px #3089dc! important; } </style> <script> import draggable from 'vuedraggable' export default {// Register draggable components: {draggable,}, data() {return {drag:false, // Define the array of objects to be dragged myArray:[{people:'cn',id:1,name:'www.itxst.com'}, {people:'cn',id:2,name:'www.baidu.com'}, {people:'cn',id:3,name:'www.taobao.com'}, {people:'us',id:4,name:'www.google.com'} ] }; }, methods: {onStart(){this.drag=true; }, // drag end event onEnd() {this.drag=false; ,}}}; </script>Copy the code

Effect achieved:

Vue. Draggable, as a powerful vue draggable component, can meet the requirement of dragging elements. It can also drag two or more columns together, just set the same group.

Realize the lane

With the example above, it becomes quite simple to implement a drag-and-drop swimlane. You can see the following implementation:

Common events and properties for vueDraggable

Vuedraggable has a number of events and attributes to enable us to implement more requirements:

Events:

Added and evt.removed (added and removed); change: added (removed); function (evt) { console.log(evt) }, //start ,end ,add,update, sort, remove start: function (evt) { console.log(evt) }, end: Function (evt) {console.log(evt) evt.item // evt.to // evt.to // evt.from // evt.oldIndex // Evt. newIndex}, move: Function (evt, originalEvent) {console.log(evt) console.log(originalEvent)} function (evt, originalEvent) {console.log(evt) console.log(originalEvent)}Copy the code

Properties:

group: "name", // or { name: "..." , pull: [true, false, clone], put: [true, false, array]} name 0, // Defines when the sorting starts in milliseconds. TouchStartThreshold: 0, // px, how many pixels should the dot move before canceling the drag delay event? Disabled: false, // If set to true, sortable is disabled. Animation: 150, // ms, animation speed when moving items sort, '0' - no animation. Handle: ".my-handle", // Drag the handle selector in the list item. Filter: ". Ignore-elements ", // selector (string or function) that doesn't cause drag True, // Call event.preventdefault () to trigger "filter" draggable: ".item", // specify which items in the element should be dragable. GhostClass: "sortable-ghost", // sets the class name of the placeholder for the class of the drag element. ChosenClass: "sortable-chosen", // Sets the class dragClass of the selected element: "sortable-drag", // Drag the class of the element. DataIdAttr: 'data-id', forceFallback: false, // Ignore HTML5 DnD behavior and force exit. FallbackClass: "sortable-fallback", // The class name of the DOM element to clone with forceFallback. FallbackOnBody: false, // Add the cloned DOM element to the body of the document. FallbackTolerance: 0, // Specify in pixels how far the mouse should move before it is considered 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, // pxCopy the code

\