0532-88180370
当前位置:青岛SEO > 新闻资讯 > 网站建设 > 正文

html5 拖曳和拖放功能的实现

发布时间:2018-6-15 发布人:管理员 人气:

现今一些网站的后台都使用拖曳功能来更改网站布局等,尤其模板建站都采用这种方式,可以让客户不操作源码情况下修改自己的网站。今天给大家一起学习html5中拖拽功能的实现;

1.drag

当拖动某个元素时,将会依次触发下列事件:

1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件

2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖动期间,该事件一直被触发

3)dragend:拖动停止时触发该事件

上面的事件的对象是要拖动的元素

2.drop

当某元素被拖动到某个有效的放置目标时,将会依次触发下列事件:

1)dragenter:只要有元素被拖动到该有效放置目标中,便触发该事件

2)dragover:dragenter后,随即触发dragover,且只要元素还在该有效放置目标中,该事件就会一直被触发

3)dragleave/drop:如果元素被拖出了该有效的放置目标的范围,便会触发dragleave事件;反之,如果元素被放置在该有效的放置目标范围内就会触发drop事件而不会触发dragleave事件;

上面的对象是作为放置目标的元素

3.dataTransfer对象

event的dataTransfer对象属性可以在拖放操作的同时实现数据交换。

dateTransfer中最重要的是setData()和getData()方法。getData可以取得由setData保存的值。

setData有两个参数,第一个是保存的数据的类型,第二个是要保存的数据;

getData只一个参数,是setData的第一个参数。

数据的类型支持所有MIME类型,常用的是text(text/plain)和URL(text/uri-list)类型。

eg:

复制代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>drag&&drop</title> </head> <style> #testDiv{ border: 2px; border-style: solid; border-color: black; width:200px; height:200px; } .testImg{ width:100px; height:100px; } </style> <body> <img id="img1" class="testImg"src="jhjh.png"/> <img id="img2" class="testImg"src="jhjh.png"/> <div id="testDiv"></div> <script> var img1=document.getElementById("img1"); var img2=document.getElementById("img2"); var testDiv=document.getElementById("testDiv");
        img1.addEventListener("dragstart",function(e){
            e.dataTransfer.setData("Text",e.target.id);
            console.log("ondragstart");
        })
        img2.addEventListener("dragstart",function(e){
            e.dataTransfer.setData("Text",e.target.id);
            console.log("ondragstart");
        })
        testDiv.addEventListener("dragover",function(e){
            e.preventDefault();
            console.log("ondragover");          
        })
        testDiv.addEventListener("drop",function(e){ var data=e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
            console.log("ondrop");
        }) </script> </body> </html>
复制代码

在上面的例子中,setData方法被绑定在被拖动的元素的dragstart阶段,而目标放置元素中,dragover事件绑定了event.preventDefault()以阻止dragover事件的默认动作(被拖动的元素回到原来位置),drop事件绑定了getData以获取setDate存储的信息,然后便可以把 被拖动的元素添加到放置目标中。

青岛网站优化

正信网络做有效果的网络推广,不做一锤子买卖,“诚实守信,尽职尽责”这就是正信科技!
地址:中国·山东省青岛市李沧区百通大厦A座
联系:0532-88180370 / 150-6687-5106
QQ:452123038 / 185715564
邮箱:kefu@qdpeople.com
邮编:266000
青岛正信达网络科技有限公司版权所有
青岛网站建设、网站制作、青岛网站优化、网络推广、微网站、微信营销请选青岛正信,选择贴心服务!备案号:鲁ICP备17017453号-2
关于我们 | 联系我们