HTML5拖拽

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

拖放（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