VueJs анимация перетаскиваемого объекта

Question

Я пытаюсь создать перетаскиваемый объект в Vuejs с нуля. Но сейчас я сталкиваюсь с проблемой 2.

1. При перетаскивании объект просто мгновенно привязывается к целевой координате.
2. Я пытался удалить 'Ghosting image', установив непрозрачность на 0% при перетаскивании, но это не сработало.

вот код, которым я являюсь работаю прямо сейчас. https://jsfiddle.net/wmsk1npb/

<div id="app">
  {{x}}/{{y}} ....... {{coordinates}}
        <div class="bubbleMenuContainer" :style="coordinates" draggable="true" @drag="move" @dragend="set">
            Test
        </div>
</div>
new Vue({
  el: '#app',
  data: {
    x:0,
    y:0,
    coordinates:{
         top: "100px",
         left: "100px",
         opacity: "100%",
     }
    },
   methods:{
        move(event){
            this.x =  event.clientX;
            this.y =  event.clientY;
            this.coordinates.left = event.clientX + "px";
            this.coordinates.top = event.clientY + "px";
            this.coordinates.opacity = "0%;"
        },
        set(event){
            this.coordinates.left = event.clientX + "px";
            this.coordinates.top = event.clientY + "px";
            this.coordinates.opacity = "100%;"
        }
    }
})
.bubbleMenuContainer{
    position: absolute;
    border-radius: 100px;
    background-color: lightcoral;
    width: 30px;
    height: 30px;
    padding: 10px;
}

Answer 1

Атрибут HTML «перетаскиваемый» используется для указания, является ли элемент перетаскиваемым. Обратите внимание, что это стандартное поведение браузера, вы можете узнать больше об этом здесь (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable). Именно поведение браузера является причиной, по которой вы видите «призрачное изображение» при попытке перетащить пузырь.

Я считаю, что вы используете гораздо более простой подход, чтобы сделать элемент перетаскиваемым. Обратитесь к этому примеру, который я подготовил на JSFiddle (https://jsfiddle.net/r8emga0u/1/).

<div id="app" @mouseup="up" @mousemove="move">
  {{x}}/{{y}} ....... {{coordinates}}
  <div class="bubbleMenuContainer" :style="coordinates" @mousedown="down">
     Test
  </div>
</div>

down(e) {
  this.bubbleMenuClickState = true;
  this.offset = [
    e.target.offsetLeft - e.clientX,
    e.target.offsetTop - e.clientY
  ];
},
up(e) {
  this.bubbleMenuClickState = false;
},
move(e) {
  if (this.bubbleMenuClickState) {
     this.coordinates.left = (e.clientX + this.offset[0]) + "px";
     this.coordinates.top = (e.clientY + this.offset[1]) + "px";
  }
}

Шаги:

1. Присоедините слушателя "mousedown" к элемент, вы можете рассчитать смещение пузырька относительно его родителя. Без этого первоначальный щелчок по пузырю, вероятно, установит его положение в 0,0, поскольку еще не было инициировано событие mousemove.
2. Присоедините слушатель «mouseup» к родительскому пузырю (в данном случае #app ), чтобы определить, когда пользователь отпускает щелчок. Таким образом предотвращая перемещение пузырька при перемещении мыши.
3. Присоедините слушателя «mousemove», чтобы обновить позицию пузырька, если пользователь щелкает, удерживает и перетаскивает пузырь.

Answer 2

Я никогда не пробовал, используя draggable="true", вместо этого я бы использовал мышь вверх, вниз, перемещение (и сенсорные аналоги, если это необходимо для сенсорных устройств)

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

Идея состоит в том, что ...

• в данных, позиции трека, позиции начального фрагмента (x, y) и о том, является ли элемент при перетаскивании
• при наведении мыши установите isDragging в true и сохранить начальную позицию перетаскивания x, y с координатами
• при перемещении мыши, если isDragging === true обновить положение на основе разницы между startdrag и текущим клиентомXY
• при наведении мыши, установите isDragging в false

, вы также можете улучшить это, добавляя и удаляя слушателя mousemove и mouseup динамически. Поскольку вы хотите, чтобы указатель мыши перемещался по документу (в любом случае, вместо элемента, это лучший способ go)

Недавно я написал об этом для нового API композиции vue3 в https://dev.to/dasdaniel/vue3-compisition-api-craeting-a-draggable-element-fo6

Поскольку он предназначен для vue3, он не подходит для копирования и вставки, но важная часть здесь:

  const onMouseDown = e => {
    let { clientX, clientY } = e;
    position.dragStartX = clientX - position.x;
    position.dragStartY = clientY - position.y;

    position.isDragging = true;

    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
  };

  const onMouseMove = e => {
    let { clientX, clientY } = e;
    position.x = clientX - position.dragStartX;
    position.y = clientY - position.dragStartY;
  };

  const onMouseUp = e => {
    let { clientX, clientY } = e;
    position.isDragging = false;
    position.dragStartX = null;
    position.dragStartY = null;
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);
  };