javascript - ondragstart - 如何删除动画？

问题描述

每当用户使用开始拖动元素时draggable="true"，该元素都会具有您正在拖动的元素的半透明副本。这是来自 W3Schools 的示例：停止启动动画

照片的右侧很重要。这是您开始拖动元素时获得的动画。

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondrag

我已经尝试使用event.preventDefault(). 但是，这里的问题是，onDrag当元素移动并且我需要来自 onDrag.

似乎有一些帖子介绍了如何在您放下动画但未开始时停止动画。

刚刚离开 W3Schools 网站上的示例，我想要没有ondragstart动画的拖动信息。

因此，如果我通过preventDefault()在ondragstart函数上添加 a 来修改代码：

function dragStart(event) {
  console.log(event);
  event.preventDefault(); //stops animation in right side of photo, but then won't let ondrag fire
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  console.log(event);
  document.getElementById("demo").innerHTML = "The p element is being dragged";
}

拖动时获得的动画消失。但是（如我的console.log)行所示，在上ondrag不会触发。这是我需要的信息。preventDefaultondragstart

preventDefaultinsideondrag不会停止该动画。这甚至可能吗？

解决方案 如果有人想知道，我发现在这种情况下我需要做些什么。您可以将 javascript 中的图像设置为透明图像：如何删除拖动（鬼）图像？所以阻力仍然在技术上运行，但那个幽灵般的形象已经消失了。没有考虑正确的搜索词。

标签： javascript

在这种情况下，我会采用不同的方法： https ://codepen.io/deibl31/pen/oNeXmPE?editors=1111

// HTML
<div id="myDiv">
</div>

// CSS
#myDiv {
  position: absolute;
  height: 100px;
  width: 100px;
  background: black;
  color: white;
}

// JS
let myDiv = document.getElementById('myDiv');
let mouseDown = false;
let divPos = {x: 0, y: 0};

myDiv.addEventListener('mousedown', (event) => {
  mouseDown = true;
});

window.addEventListener('mousemove', (event) => {
  if (mouseDown) {
    divPos.x = event.clientX;
    divPos.y = event.clientY;    
  }
});
 
window.addEventListener('mouseup', (event) => {
  if (mouseDown) {
    myDiv.style.top = divPos.y + 'px';
    myDiv.style.left = divPos.x + 'px';
  }
  mouseDown = false;
});

javascript - ondragstart - 如何删除动画？

问题描述

解决方案

推荐阅读