Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to achieve pc drag effect in vue-draggable". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve pc drag effect in vue-draggable" can help you solve your doubts.

Drag-and-drop integration and relocation can be achieved in order to achieve the following layout

Before dragging:

After dragging:

First, install npm I-S vuedraggable II, use

Introduce:

Import draggable from 'vuedraggable'

Register

Components: {draggable}

Use

{{item.name}} list2: [{value:1,name: "China"}, {value:1,name: "China"}, {value:1,name: "China"}]

Events:

/ / there are two values in evt An evt.added and evt.removed can know the ID of the mobile element and the ID change of the deleted element: function (evt) {console.log (evt)}, / / start, end, add,update, sort, remove all get the same start: function (evt) {console.log (evt)} End: function (evt) {console.log (evt) evt.item / / you can know the drag itself evt.to / / you can know the list of targets dragged evt.from / / you can know the previous list evt.oldIndex / / you can know the position before dragging evt.newIndex / / you can know the position after dragging}, move: function (evt OriginalEvent) {console.log (evt) console.log (originalEvent) / / Mouse position}

Attribute

Group: "name", / / or {name: "...", pull: [true, false, clone], put: [true, false, array]} name the same group can drag sort: true, / / internal sort list delay: 0, / / defines when sorting starts in milliseconds. TouchStartThreshold: 0, / / px, how many pixels should the point move before canceling the delayed drag event? Disabled: false, / / if set to true, sortable is disabled. Store: null, / / @ see Store animation: 150,150, / / ms, when sorting animation speed motion items,'0'-no animation. Handle: ".my-handle", / / drag the handle selector in the list item. Filter: ".drag-elements", / / selector (string or function) that does not cause dragging preventOnFilter: true, / / triggers "filter" draggable: ".item" when calling "event.preventDefault ()", / / specifies which items in the element should be draggable. GhostClass: "sortable-ghost", / / sets the class name of the placeholder for the class of the drag element. ChosenClass: "sortable-chosen", / / set the class dragClass of the selected element: "sortable-drag", / / drag the class of the element. DataIdAttr: 'data-id', forceFallback: false, / / ignores the DnD behavior of HTML5 and forces the exit. (there is an attribute in H6 that is also dragged, and this is to remove the effect of H5 dragging.) fallbackClass: "sortable-fallback", / / the class name of the DOM element cloned when using forceFallback. FallbackOnBody: false, / / add the cloned DOM element to the body of the document. (placed by default at the same level of the element being dragged) fallbackTolerance: 0, / / specifies the distance the mouse should move before it is considered a drag in pixels. Scroll: true, / / or HTMLElement scrollFn: 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, / / px

Slot:

Use footer slots to add non-draggable elements to the vuedraggable component. Important: it should be used with draggable options to mark draggable elements. Note that by default, footer slots are always added

{{element.name}} Add has read this article "how to achieve pc drag effect with vue-draggable". If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.