Prevent Lib from manipulating the DOM (Vue.js)

[PhillippOhlandt]

Is there a way to prevent the lib from manipulating the DOM?
I use it in a VueJS component and adjust my data array in the sortablejs onSort function. My list will be rendered based on my data array so it's a little but dump to do with with this lib too.

And I have some problems with the manipulated DOM by this lib. See more here:
https://github.com/yyx990803/vue/issues/1272

[RubaXa]

What does it mean to prevent?
Sortable — based on DOM manipulation elements.

[PhillippOhlandt]

I just need the drag and drop feature and the info which items was changed. VueJS will do the DOM manipulation then.

[RubaXa]

Then you should not be used Sortable.
P.S. #176

[onefriendaday]

You can use Sortable with vuejs. Remove the dragged element and rebuild your data array:

Sortable.create(this.el, {
    animation: 150,
    handle: '.uk-nestable-handle',
    onEnd: function (e) {
        // Remove the dragged item from dom
        e.item.remove()

        // Clone container
        var clone = _a.clone(self._scope.model[self._scope.$key])
        self._scope.model[self._scope.$key] = []

        // Move to new position
        var swappedEl = clone.splice(e.oldIndex, 1)[0]
        clone.splice(e.newIndex, 0, swappedEl)

        // On next Tick update with clone
        self._scope.$nextTick(function() {
            self._scope.model[self._scope.$key] = clone
        })
    }
})

Is there any clean way to achieve this? There is no reason to not have a flag to disable DOM manipulation...

[juanbermudez]

@mgrandl Just in case you ever run into this I had a similar situation with Vue.js and Vue-Sortable.js
Seems the component became disconnected.

My temp solution was creating an action (vuex) or you can do it against the local state for a component that forced an updated on the next tick, similar to what @onefriendaday shared.
That refresh method runs on the onEnd event from the Sortable, it clones the last element in the list of items, then pop the last one and push the clone in. It is a bit messy but Vue-Sortable might need an updated to handle this properly.

[miwucs]

I ran into the same issue when using SortableJS with Lit. This is my solution, which should work for other frameworks too. Note it's in Typescript but you can convert it to javascript easily (just remove the type information and the '!' that tell typescript a variable is not null).

let childNodes: ChildNode[] = [];
Sortable.create(myContainer, {
  onStart: (e) => {
    const node = e.item as Node;
    // Remember the list of child nodes when drag started.
    childNodes =
      Array.prototype.slice.call(node.parentNode!.childNodes);
    // Filter out the 'sortable-fallback' element used on mobile/old browsers.
    childNodes = childNodes.filter(
      (node) =>
        node.nodeType != Node.ELEMENT_NODE ||
        !(node as HTMLElement).classList.contains('sortable-fallback')
    );
  },
  onEnd: (e) => {
    // Undo DOM changes by re-adding all children in their original order.
    const node = e.item as Node;
    const parentNode = node.parentNode!;
    for (const childNode of childNodes) {
      parentNode.appendChild(childNode);
    }
    if (e.oldIndex == e.newIndex) return;
    // Then move the element using your own logic.
    // (assuming this.myList is the array being sorted).
    const element = this.myList.splice(e.oldIndex, 1)[0];
    this.myList.splice(e.newIndex, 0, element);
    // Ask for component redraw (if needed).
    // This is how it's done in Lit. Adapt to your framework.
    this.requestUpdate();
  },
});

[enkelmedia]

@miwucs you saved my night =D I've spent several hours fiddling with this, my use case is simular but I need to drag between different containers. I was on the same track with "resetting" the DOM after the from but your example help me the last bit =D

Figured I'll share my code here if anyone needs to drag between containers.

let fromChildNodes: ChildNode[] = [];
let toChildNodes : ChildNode[] = [];

this.sortable = Sortable.create(rowsContainer,{
    onStart: (e) => {
        const node = e.item as Node;
        fromChildNodes = [];
        // Remember the list of child nodes when drag started.
        fromChildNodes = Array.prototype.slice.call(node.parentNode!.childNodes);
        // Filter out the 'sortable-fallback' element used on mobile/old browsers.
        fromChildNodes = fromChildNodes.filter(
            (node) =>
            node.nodeType != Node.ELEMENT_NODE ||
            !(node as HTMLElement).classList.contains('sortable-fallback')
        );
        },
        onMove: function (evt, originalEvent) {
            // Move is called when the drag enters a new "to"-container.
            // here we're storing the children on the two container to be
            // used to restore it if there is a drop.
            toChildNodes = [];
            toChildNodes = Array.prototype.slice.call(evt.to.childNodes);
            // Filter out the 'sortable-fallback' element used on mobile/old browsers.
            toChildNodes = toChildNodes.filter(
                (node) =>
                node.nodeType != Node.ELEMENT_NODE ||
                !(node as HTMLElement).classList.contains('sortable-fallback')
        );
    },
    onEnd : (e)=> {

        // Undo DOM changes by re-adding all children in their original order.
        
        for(const childNode of fromChildNodes){
            e.from.appendChild(childNode);
        }
        for (const childNode of toChildNodes) {
            e.to.appendChild(childNode);
        }
        

        const element = this.myList.splice(e.oldIndex, 1)[0];
        this.myList.splice(e.newIndex, 0, element);
        // Ask for component redraw (if needed).
        // This is how it's done in Lit. Adapt to your framework.
        this.requestUpdate();

        
    },
    
});

[ChristopherJohnson25]

Is anyone handling a similar case here, but with Vue/Vuex?

[sandeepps]

@miwucs
Thank you so much.. I had the same issue and am able to fix the issue with your approach.