VueJs可拖动对象动画

Question

我正在尝试从头开始在Vuejs中创建可拖动对象。但是我现在面临两个问题。

1. 当DragEnd时，对象只是捕捉到目标坐标即刻。
2. 我尝试通过设置删除“重影图像”拖动时不透明度为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

我从未使用draggable="true"尝试过，相反，我将使用鼠标上下，移动（如果需要触摸设备，则使用触摸对应物）

这将为您提供更多控制权，然后您就不会显示该重叠项。

想法是...

• 在数据中，跟踪位置，开始拖动位置（x，y）以及是否拖动项目
• 在鼠标按下时将isDragging设置为true，并存储开始拖动位置x，y坐标
• 在鼠标移动时，如果isDragging === true根据startdrag和当前clientXY之间的差异更新位置，则>]
• 在鼠标上，将isDragging设置为false

您还可以通过动态添加和删除侦听器mousemove和mouseup来改进此功能。因为您希望鼠标在文档上移动侦听器（无论如何都可以代替元素，所以这是一种更好的方法）

我最近在https://dev.to/dasdaniel/vue3-compisition-api-craeting-a-draggable-element-fo6上为新的vue3合成api完成了此工作的文章>

因为它是用于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);
  };

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";
  }
}
步骤：
将“ mousedown”侦听器附加到元素，您可以计算气泡相对于其父元素的偏移量。没有这个，气泡的初始点击可能会将其位置设置为0,0，因为尚未触发任何mousemove事件。

将“ mouseup”侦听器附加到气泡的父级（在本例中为#app），以检测用户何时释放点击。这样可以防止mousemove事件移动气泡。

如果用户单击并按住并拖动气泡，请附加“ mousemove”侦听器以更新气泡的位置。

Answer 2

HTML属性“可拖动”用于指示元素是否可拖动。请注意，这是本机浏览器的行为，您可以在此处（https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable）了解更多信息。这是浏览器行为的原因，是您尝试拖动气泡时看到“鬼影”的原因。