Как удерживать элемент на прежней позиции до тех пор, пока он не будет отпущен - PullRequest
Новая
       25

Как удерживать элемент на прежней позиции до тех пор, пока он не будет отпущен

2 голосов
/ 23 октября 2019

Я реализую компонент вложенных слоев в vue с помощью vuedraggable. Я стараюсь держать его близко к панели слоев Adobe (например, в Illustrator).

Требуемое поведение: при перетаскивании элемента он остается на своей позиции, и только черная линия указывает, где этот элемент будетвставляется после отпускания перетаскивания.

Черная линия может быть реализована с помощью стилизации vue draggable ghost. Но как я могу предотвратить удаление элемента из исходного положения во время перетаскивания?

Пример слоев Adobe Illustrator

Ответы [ 2 ]

0 голосов
/ 25 октября 2019

Теперь я использую подход, аналогичный ответу Вальса смерти , но без непосредственного манипулирования 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/

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

0 голосов
/ 23 октября 2019

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

Пример: 

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;
  };

};
...