VueJs 可拖动对象动画答案

【问题标题】：VueJs draggable object animationVueJs 可拖动对象动画
【发布时间】：2020-03-20 03:19:23
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js draggable drag

【解决方案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);
  };

【讨论】：

【解决方案2】：

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”侦听器以更新气泡的位置。

【讨论】：