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

概述我只是想知道如何使用 HTML5的拖放API来改变我们拖动的对象的样式.我在网上搜索但一无所获！看过这个教程,但它没有给我提供有关在拖动对象时设置样式的信息. 解决这个问题的任何方法？ 而且,这可能吗？ 这部分是可能的 在HTML5中,您无法更改ghost对象的样式 但是您可以使用更改默认的ghost对象 DataTransfer对象中的setDragImage方法. 在这里做了一个例子(蓝色di 我只是想知道如何使用 HTML5的拖放API来改变我们拖动的对象的样式.我在网上搜索但一无所获！看过这个教程,但它没有给我提供有关在拖动对象时设置样式的信息.

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

而且,这可能吗？

解决方法 这部分是可能的
在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>@H_404_26@  
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
                            	          总结       
以上是内存溢出为你收集整理的html – 在我们拖动对象时设置对象的样式全部内容，希望文章能够帮你解决html – 在我们拖动对象时设置对象的样式所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1077478.html