HTML5拖拽

来源:互联网 发布:windows dpi 修改工具 编辑:程序博客网 时间:2024/06/16 06:34

拖放(Drag 和 drop)

 

步骤:(图片拖到div中)

1、<img id="drag1" src="1.png" draggable="true" ondragstart="drag(event)"/>  设置源的draggable为true

2、在图设置ondragstart方法,方法中使用setData方法设置图片的id进Text

3、在div设置ondragover方法

4、在div设置ondrop方法,通过getData取到图片的id

 

例子源码:

<!DOCTYPE HTML><html><head><script type="text/javascript">function dragstart(evt){//拖动前  img方法evt.dataTransfer.setData("Text",evt.target.id);//设置拖动元素数据为Text  值为图片的id}function dragover(evt){//拖动经过   div方法evt.preventDefault();}function drop(evt){//拖动中div方法evt.preventDefault();var data = evt.dataTransfer.getData("Text");evt.target.appendChild(document.getElementById(data));}</script></head><body><div id="d1" ondragover="dragover(event);" ondrop="drop(event);" style="border:1px solid red;width:400px;height:200px;">拖动到这里吧~~</div><img id="img1" src="1.png" draggable="true" ondragstart="dragstart(event);"/></body></html>


 

 

0 0