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

Question

我只是想知道如何使用HTML5的拖放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或canvas.

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

完成该工作后,还会阅读有关DataTransfer对象的内容: developer.mozilla.org/en-US/docs/Web/API/DataTransfer