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

Question

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

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

此外，这可能吗？

Answer 1

部分可能在 HTML5 中，您无法更改 ghost 对象的样式，但您可以使用 DataTransfer 对象中的 setDragImage 方法更改默认 ghost 对象。这里做了一个例子（蓝色的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 或一个画布。

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

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