Vue Drag Sort

Posted on  by admin

GitHub

A fast and lightweight drag&drop, sortable library for Vue.js with many configuration options covering many d&d scenarios.

This library consists wrapper Vue.js components over smooth-dnd library.

Not the answer you're looking for? Browse other questions tagged javascriptjqueryvue.js or ask your own question.

vue-smooth-dnd

  • Show, don't tell ! Component that contains the draggable elements or components. Each of its children should be wrapped by Draggable component. Event to be emitted only by the container which drag starts from.
  • The event to be emitted by any relevant container when drop is over.
  • (After drop animation ends). Source container and any container that could accept drop is considered relevant.
  • dropResult : objectremovedIndex : number : index of the removed children.
  • Will be null if no item is removed.addedIndex : number : index to add droppped item.
  • Will be null if no item is added.payload : object : the payload object retrieved by calling get-child-payload function.element : DOMElement : the DOM element that is moved.

API

Usage

removedIndex : number : index of the removed children. Will be null if no item is removed.

drag-start

drag-enter

addedIndex : number : index to add droppped item.

drop

Will be null if no item is added.

get-child-payload

payload : object : the payload object retrieved by calling get-child-payload function. element : DOMElement : the DOM element that is moved.

Properties

should-animate-drop

Draggable

Container

should-accept-drop

The function to be called to get the payload object to be passed onDrop function. index : number : index of the child item.

payload : object. The function to be called by the target container to which the dragged item will be droppped.Sometimes dragged item's dimensions are not suitable with the target container and dropping animation can be wierd. So it can be disabled by returning false.

drag-leave

If not set drop animations are enabled. sourceContainerOptions : object : options of the source container. (parent container of the dragged item).

payload : object : the payload object retrieved by calling get-child-payload function. boolean : true / false. The function to be called by all containers before drag starts to determine the containers to which the drop is possible. Setting this function will override the group-name property and only the return value of this function will be taken into account.

Installation

sourceContainerOptions : object : options of the source container.

(parent container of the dragged item). payload : object : the payload object retrieved by calling get-child-payload function.

boolean : true / false. The event to be emitted by the relevant container whenever a dragged item enters its boundaries while dragging. The event to be emitted by the relevant container whenever a dragged item leaves its boundaries while dragging.

Wrapper component for Container's children. Every child element should be wrapped with Draggable component. Modified5 years, 11 months ago.

I have a problem with sort order using drag & drop in Vue.js.

Parameters

My problem is how can I make the sort order begin from number 1, not from number 0?

With my current code, after I drag & drop, the element order numbers change from starting with 1 to starting with 0. Here is my current code:. but it doesn’t work. 135135 bronze badges. 1,45955 gold badges1717 silver badges2626 bronze badges. 1717 silver badges2626 bronze badges.

Returns

In this part of the JS:. Just change the third line to this:. The full working code:.

1111 gold badges9090 silver badges127127 bronze badges.

Vue

127127 bronze badges.

If not null this function will be called in a similar way as Sortable onMove callback.
Returning false will cancel the drag operation.

evt object has same property as Sortable onMove event, and 3 additional properties:

  • draggedContext: context linked to dragged element
    • index: dragged element index
    • element: dragged element underlying view model element
    • futureIndex: potential index of the dragged element if the drop operation is accepted
  • relatedContext: context linked to current drag operation
    • index: target element index
    • element: target element view model element
    • list: target list
    • component: target VueComponent

HTML:

javascript:

See complete example: Cancel.html, cancel.js

componentData

Type: Object
Required: false
Default: null

This props is used to pass additional information to child component declared by tag props.
Value:

  • props: props to be passed to the child component
  • attrs: attrs to be passed to the child component
  • on: events to be subscribe in the child component

Example (using element UI library):

Events

  • Support for Sortable events:

    start, add, remove, update, end, choose, sort, filter, clone
    Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onSort, onClone are fired by Sortable.js with the same argument.
    See here for reference

    Note that SortableJS OnMove callback is mapped with the move prop

HTML:

  • change event

    change event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation.
    This event is called with one argument containing one of the following properties:

    • added: contains information of an element added to the array
      • newIndex: the index of the added element
      • element: the added element
    • removed: contains information of an element removed from to the array
      • oldIndex: the index of the element before remove
      • element: the removed element
    • moved: contains information of an element moved within the array
      • newIndex: the current index of the moved element
      • oldIndex: the old index of the moved element
      • element: the moved element

Slots

Limitation: neither header or footer slot works in conjunction with transition-group.

Header

Use the header slot to add none-draggable element inside the vuedraggable component.
Important: it should be used in conjunction with draggable option to tag draggable element.
Note that header slot will always be added before the default slot regardless its position in the template.
Ex:

Use the footer slot to add none-draggable element inside the vuedraggable component.
Important: it should be used in conjunction with draggable option to tag draggable elements.
Note that footer slot will always be added after the default slot regardless its position in the template.
Ex:

Gochas

  • Vue.draggable children should always map the list or value prop using a v-for directive

    • You may use header and footer slot to by-pass this limitation.
  • Children elements inside v-for should be keyed as any element in Vue.js. Be carefull to provide revelant key values in particular:

    • typically providing array index as keys won't work as key should be linked to the items content
    • cloned elements should provide updated keys, it is doable using the lone props for example

GitHub