Как продолжать перетаскивать элемент в прежнее положение до выпуска в vue draggable

Теперь я использую аналогичный подход к ответу Death Waltz, но без прямого манипулирования DOM.

Вместо этого я делаю копию элемента в списке...

start(event) {
    // Make a clone of the choosen item and add it to the
    // layers list.
    const index = event.oldIndex
    const item = this.layers[index]
    this.layers.splice(index + 1, 0, {
    ...item,
    // Vue requires unique keys.
    id: item.id + '_clone',
    // Set a isClone flag to be able to delete the clone
    // afterwards.
    isClone: true
  })
},

...и удалить потом

end() {
    // Delete the clone from the layers.
    this.layers = this.layers.filter(layer => !layer.isClone)
}

вот полный пример: https://jsfiddle.net/arnoson/587L0nx9/45/

Я до сих пор не уверен, что это самое элегантное решение, и хотел бы, чтобы для этого был встроенный способ.

В итоге я использовал sl-vue-tree , который делает практически все, что мне нужно для моделирования Панель слоев Adobe Illustrators.

По сути, создайте копию элемента по щелчку, а затем сделайте выбранный элемент невидимым. При наведении мыши скройте копию и снова сделайте элемент видимым.

Пример:

ball.onmousedown = function(event) { // (1) start the process

  // (2) prepare to moving: make absolute and on top by z-index

  var ball2 = ball; //set the balls current position so it doesn't appear to move
  ball.style.position = 'absolute';
  ball.style.visibility = "hidden"; //make the moving item invisible

  document.body.append(ball);
  // ...and put that absolutely positioned ball under the pointer

  moveAt(event.pageX, event.pageY);

  // centers the ball at (pageX, pageY) coordinates
  function moveAt(pageX, pageY) {
    ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = pageY - ball.offsetHeight / 2 + 'px';

  }

  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
  }

  // (3) move the ball on mousemove
  document.addEventListener('mousemove', onMouseMove);

  // (4) drop the ball, remove unneeded handlers
  ball.onmouseup = function() {
    ball.style.visibility = "visible"; //makes the moved ball visible again
    ball2.style.visibility = "hidden"; //makes the copy invisible
    document.removeEventListener('mousemove', onMouseMove);
    ball.onmouseup = null;
  };

};