大佬教程收集整理的这篇文章主要介绍了HTML5拖动技术,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML5拖动
首先明白什么是拖动
拖放即抓取对象以后将其拖到另外一个位置。
在HTML5标准中,拖动是属于其中的一部分,任何属性都可以拖动。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
拖动解析:
先提供本次解析的总代码:
<!doctype html> <html> <head> <Meta charset="utf-8"> <title>DOCUMENT</title> <script src="../js/jquery-2.1.1.min.js"></script> <style> *{ margin:0; padding:0; } .a{ width:10rem; height:10rem; border:1px solid black; } .b,.c{ width:15rem; height:15rem; border:1px solid red; overflow-x:hidden; overflow-y:auto; } </style> <script> $(function(){ $(".a")[0].ondragstart = function(E){ console.log(e.dataTransfer);//用于研究event.dataTransfer对象 e.dataTransfer.setData("Text",$(this).attr("class")); }; $(".a")[0].ondragend = function(E){ console.log("dragend"); }; $(".a")[0].ondragenter = function(E){ console.log("dragenter"); }; $(".b")[0].ondrop = function(E){ e.preventDefault(); console.log("ondrop"); var $i = "." + e.dataTransfer.getData("Text") +""; $(this).append($($i).clone()); } $(".b")[0].ondragover = function(E){ e.preventDefault(); } }); </script> </head> <body> <div class="a" draggable = "true"></div> <div class="b"></div> <div class="c"></div> </body> </html>
步骤:
第一步,将元素设定为可以被拖动。
通过draggable = true来设定一个元素是否被允许拖动。
<div class="a" draggable = "true"></div>
第二步,通过ondragstart()将被拖动的元素的一些信息加入event.dataTransfer对象中。
ondragstart()函数大家从这个函数的名字上就可以知道,在拖动开始的时候回触发这个函数。然后我们就需要在这个函数里面进行一些处理。
$(".a")[0].ondragstart = function(E){ console.log(e.dataTransfer);//用于研究event.dataTransfer对象 e.dataTransfer.setData("Text",$(this).attr("class")); };
其中dataTransfer对象的setData便是获取一些被拖动元素的信息,以至于在放置这个元素的时候可以将它加入。
第三步,将一个元素设定为可以被放置元素。
ondragover()就这个函数名称大家可能会疑惑,拖动覆盖,其实它的意思大概是当一个元素在我的元素区域范围内时,是否允许那个拖动的元素放置在我的元素区域内。
而对于HTML5标准中,一个元素默认是不能拖动一个元素放到自己区域中来的额,所以我们要在这个函数中执行一个语句,event.preventDefault()函数会取消掉一个元素原本要进行的动作。
$(".b")[0].ondragover = function(E){ e.preventDefault(); }
第四步,当一个元素在另外一个元素中放下时,另外一个元素应该干什么。如此就需要一个函数,ondrop()。
$(".b")[0].ondrop = function(E){ e.preventDefault(); var $i = "." + e.dataTransfer.getData("Text") +""; $(this).append($($i).clone()); }
ondragend(),当前被拖动的元素结束拖动时触发(ondrop函数发生在此函数之前)。
ondragenter(),当前被拖动的元素进入一个可以放置元素的元素时触发。
ondragleave(),当前被拖动的元素结束拖动时触发。
其中大家要注意的是,一些函数是针对哪个元素的。
针对拖动元素的函数如下:
ondragend(),ondragenter(),ondragleave(),ondragstart(),
针对被放置元素的容器的函数如下:
ondragover(),ondrop()
对于dataTransfer对象大家可以console.log打印他到控制台看看他的一些函数,这里再讲一个常用的函数那边是setDragImage()用于设定鼠标移动过程中随鼠标一起移动的效果图,这个东西的设定必须在dragstart中设置。
以上是大佬教程为你收集整理的HTML5拖动技术全部内容,希望文章能够帮你解决HTML5拖动技术所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。