Sortable: Keep initial position of item

[petronellius]

Similar to Chrome or Firefox Bookmarks Toolbar. It keeps initial position of item during dragging, showing a line at the position when item is potentially dropped.

[Nightbr]

Hey, also interested in a solution for this. I have the part when you transform the chosenClass: "sortable-chosen" and transform the element to a bar:

:host(.sortable-chosen) {
  visibility: hidden;
  height: 1px;
  position: relative;
  &::before {
    content: '';
    visibility: visible;
    border-bottom: 1px solid $primary;
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
}

But I can't achieve to let the item at its initial position and do the move only on dragEnd...

Thanks in advance for anyone helping on this!

[Nightbr]

I achieve something which is quite hacky but seems to work so far. I create a clone of my element and reinsert it in the DOM at the same place of the dragged element. And remove it onDragEnd. I have some issue of DOM rendering but it's because I use webcomponent. For normal DOM element this should work perfectly:

import Sortable from 'sortablejs';
import { EventEmitter } from '@stencil/core';

export function initMenuSort(el: HTMLElement, emitter: EventEmitter) {
  let persistentClone: HTMLElement = null;
  const sort = Sortable.create(el, {
    draggable: '.my-draggable',
    handle: '.drag-handle',
    filter: 'my-menu-action',
    group: { name: 'menu' },
    ghostClass: 'sortable-ghost',
    chosenClass: 'my-sortable-chosen',
    sort: true,
    onStart: (e: any) => {
      const el = e.item as HTMLMyComponentElement;
      let index = e.oldIndex;
      if (index < 0) {
        index = 0;
      }
      // @TODO el.cloneNode(true) (deep=true)
      // this cause the component to rerender and display the content <slot> twice
      // when stenciljs will be bulletproof on cloneNode(deep=true) we will have the clone properly displaying
      persistentClone = e.from.insertBefore(
        el.cloneNode(),
        e.from.children[index]
      );
      persistentClone.classList.add('my-sortable-disable');
      persistentClone.classList.remove('my-draggable');
      console.log(persistentClone);
      console.log(e);
      el.dragStart();
    },
    onEnd: (e: any) => {
      const data = {
        oldIndex: e.oldIndex,
        newIndex: e.newIndex,
        item: e.item,
        newParent: e.to,
        oldParent: e.from
      };
      const el = e.item as HTMLMyComponentElement;
      el.dragEnd();
      persistentClone.remove();
      persistentClone = null;
      emitter.emit(data);
    },
    onMove: e => {
      // If it's not draggable, we cancel the move
      if (e.related.classList.contains('my-draggable')) {
        return true;
      }
      return false;
    }
  });
  return sort;
}

Adapte the code to your case ;)

[owen-m1]

Perhaps a placeholder element option, to stay in the original position of the element?

[miguelyoobic95]

We are having issues when sorting an item and then re-rendering a stencil component, this causes sortable to repeat the previous drag action - I am not sure why this is occurring. @Nightbr is this the issue you were trying to get around ?

[Nightbr]

Hey @miguelyoobic95 it's another problem you describe. But we manage to include sortableJS with stenciljs component, we use our fork
-> "sortablejs": "https://github.com/saloonio/Sortable.git#dev-firefoxShadowRoot"

We use a stenciljs component container which instantiate sortablejs:

componentDidLoad() {
    this.sortableElement = Sortable.create(this.el.querySelector('.components') as HTMLElement, {
      handle: '.drag-icon',
      draggable: '.plop-draggable',
      filter: 'plop-new-component-container soon-button',
      animation: 150,
      onStart: e => {
        const el = e.item as HTMLPlopComponentElement;
        el.dragStart();
      },
      onEnd: e => {
        const el = e.item as HTMLPlopComponentElement;
        el.dragEnd();
        this.drop(e);
      },
      onMove: e => {
        // If it's not draggable, we cancel the move
        if (e.related.classList.contains('plop-draggable')) {
          return true;
        }
        return false;
      }
    });
  }

[philippkuehn]

I'm also interested in this feature. Another great example for this is Notion:

[owen-m1]

This would be a great idea for a plugin. I could try to make it myself, but if anyone else wants to give it a try - the docs for creating a plugin are here: https://github.com/SortableJS/Sortable/blob/master/plugins/README.md

[Nightbr]

using our code snippet https://github.com/SortableJS/Sortable/issues/1345#issuecomment-434630156 & https://github.com/SortableJS/Sortable/issues/1345#issuecomment-434655435

[owen-m1]

@Nightbr Would you be interested in making your implementation into a plugin?

[Nightbr]

I don't think it could be easy because I'm wrapping SortableJS into a Stenciljs webcomponent. But I could try if I have spare time ;)

[MihirGH]

Is there any plugin or API available to achieve this using just SortableJS?

I am also stuck with the same problem.