在我们拖动对象时对其进行样式设置

Posted 2023-05-08

【中文标题】在我们拖动对象时对其进行样式设置

【英文标题】：Styling the object while we are dragging it

【发布时间】：2013-06-20 03:06:34

【问题描述】：

我只是想知道如何使用 html5 的 Drag/Drop API 更改我们正在拖动的对象的样式。我在网上搜索但一无所获！看过本教程，但它没有提供有关在拖动对象时设置对象样式的信息。

有解决这个问题的办法吗？

另外，这可能吗？

【参考方案1】：

部分可能 在 HTML5 中，您无法更改 ghost 对象的样式 但是您可以使用 来自 DataTransfer 对象的 setDragImage 方法。 这里打了个例子（蓝色的div拖拽的时候会变成红色的div）：

  <style>
      #div1
        background-color:blue;
        width:100px;
        height:100px;
      
      #div2
        background-color:red;
        width:100px;
        height:100px;
      
    </style>
    ...
    <div id="div1" draggable="true" ></div>
    <br/>
    <div id="div2" ></div>
    <script>
      document.getElementById('div1').addEventListener('dragstart', function(event) 
        event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);
      );
    </script>

http://jsfiddle.net/ftX3C/

所以你不能改变样式，但有一个隐藏元素可以用作幻像。它也可以是 img 或 canvas。

我推荐以下关于html5拖放的教程： http://www.html5rocks.com/en/tutorials/dnd/basics/

在完成该 tut 后，还可以阅读有关 DataTransfer 对象的信息： developer.mozilla.org/en-US/docs/Web/API/DataTransfer

【讨论】：

工作正常！我还添加了 e.offsetX、e.offsetY 作为第 2 和第 3 参数而不是 50、50。谢谢！

这不会在拖动时改变图像，而只会在拖动开始时改变。

@MichaelSchmid，你有没有找到在拖动时改变样式的方法？

不@Lossan，我没有。然后我放弃了 Drag-and-Drop API（出于这个和其他原因），并愉快地使用 javascript 库解决了我的问题。