html - 在拖动对象时设置对象的样式

Question

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

这个问题有什么解决办法吗？

此外，这可能吗？

Answer 1

部分可能在 HTML5 中，您无法更改幽灵对象的样式但是您可以使用更改默认的幽灵对象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/

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