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制作而成的插件。
扫一扫
5783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
