Question

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

这个问题的任何解决方案？

此外，这可能吗？

Answer 1

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

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

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

在我们拖动它时设置对象的样式

1 个答案: