HTML5拖放，隐藏基础图像

Question

我正在用html5做拖放事件。

如果拖动图像，则透明图像会停留在鼠标光标上，尽管基础图像保持静止。我想隐藏基础图像，就像你移动一些真实的物体一样。

所以我尝试了这段代码。

  <img src="img/tape01.png" id="img">

var img  = document.getElementById('img');

img.addEventListener('dragstart', function(evt) {
     //catch the drag event here.
         img.style.visibility = 'hidden';           

    }, true);

但它不仅隐藏了基本图像，还隐藏了拖动的图像。

Answer 1

这是html5浏览器的标准行为，即在屏幕上保持可拖动对象的两个图像，以在拖放事件完成之前提醒用户拖动对象的开始位置和当前位置。

在您的示例中，将可拖动对象'img‘设置为不可见将使其两个图像同时不可见。