HTML5学习日记—拖放特性

来源：互联网发布：好听的网络歌曲推荐编辑：程序博客网时间：2024/05/19 14:36

使用h5在两个div中拖放图像，完整代码如下：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>图像拖放演示</title><style type="text/css">    #div1,#div2{        float: left;        width: 198px;        height: 66px;        margin:10px;        padding: 10px;        border:1px solid #FF0000;    }</style><script type="text/javascript">function allowDrop(ev){    ev.preventDefault();}function drag(ev){    ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){    ev.preventDefault();    var data=ev.dataTransfer.getData("Text");    ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">  <img src="F:\网页设计\images\tower01.jpg" width="180px" height="60px" draggable="true" ondragstart="drag(event)" id="drag1" /></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body></html>

插入图片的src地址请自行修改。最终的效果如下：
拖放前
拖放后
代码要点：

要实现两个div来回的拖放，则在HTML中两个div中都要设置ondrop和ondragover事件
在JS部分涉及到3个函数：权限(allowDrop(ev))、拖(drag(ev))、放(drop(ev))
allowDrop():默认地，无法将元素放置到其他元素中，如果需要放置，这要通过调用ondragover事件的event.preventDefault()方法，此处就是把它封装到allowDrop()函数中。
drag():这里涉及到一个难点dataTransfer对象，作用是添加自定义数据格式。源代码中 ev.dataTransfer.setData(“Text”,ev.target.id);设置的format是text。
```
                                //热切欢迎各类指正和批评
```

阅读全文

0 0