整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
拖拽 Making Elements Draggable
The drag and drop feature lets you "grab" an object and drag it to a different location.To make an element draggable, just set the draggableattribute to true:
Any HTML element can be draggable.
The API for HTML5 drag and drop is event-based.
HTML5拖放API是基于事件的。
<!DOCTYPE HTML><html><head><script>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="box" ondrop="drop(event)"ondragover="allowDrop(event)"style="border:1px solid black; width:200px; height:200px"></div><img id="image" src="sample.jpg" draggable="true"ondragstart="drag(event)" width="150" height="50" alt="" /></body></html>
2 拖动什么 What to Drag
When the element is dragged, the ondragstartattribute calls a function, drag(event), which specifies what data is to be dragged.The dataTransfer.setData()method sets the data type and the value of the dragged data:
当元素被拖动时，ondragstart属性调用一个函数drag（event），它指定要拖动的数据。
dataTransfer.setData（）方法设置数据类型和拖动数据的值：
在我们的示例中，数据类型为“text”，值为可拖动元素的ID（“image”）。
3 Where to Drop
The ondragoverevent specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragoverevent.
ondragover事件指定可以删除拖动数据的位置。 默认情况下，数据和元素不能在其他元素中删除。 为了允许一个drop，我们必须防止该元素的默认处理。
这可以通过调用ondragover事件的event.preventDefault（）方法来完成。
3 Where to Drop
The ondragoverevent specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.This is done by calling the event.preventDefault() method for the ondragoverevent.
ondragover事件指定可以删除拖动数据的位置。 默认情况下，数据和元素不能在其他元素中删除。 为了允许一个drop，我们必须防止该元素的默认处理。
这可以通过调用ondragover事件的event.preventDefault（）方法来完成。
3 Do the Drop
When the dragged data is dropped, a drop event occurs.In the example above, the ondropattribute calls a function, drop(event):
当拖放的数据被丢弃时，会发生丢弃事件。
在上面的例子中，ondrop属性调用一个函数drop（event）：
The preventDefault() method prevents the browser's default handling of the data (default is open as link on drop).
preventDefault（）方法阻止浏览器对数据的默认处理（默认为打开链接）。
The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.The dragged data is the ID of the dragged element ("image").
可以使用dataTransfer.getData（）方法访问拖动的数据。 该方法将返回在setData（）方法中设置为相同类型的任何数据。
拖动的数据是拖动元素的ID（“image”）。At the end, the dragged element is appended into the drop element, using the appendChild() function.
最后，使用appendChild（）函数将拖动的元素附加到放置元素中。
简介】
拖放是一种常见的特性, 属于html5标准的一部分, 即抓取对象以后拖动到另一个位置, 在html5中, 任何元素都可被设置拖放。首先, 我们要给需要拖动的HTML元素启用拖动功能, 设置属性draggable="true",
<div draggable="true"></div>
提示：a标签和img标签默认是启用该属性的, 可不需要设置draggable属性。
draggable有三个值, 如下所示：
draggable = true(元素可以被拖动)
draggable = false(元素不能被拖动)
draggable = auto(浏览器可以自主决定某个元素是否可以被拖动)
【用法】
当我们用鼠标拖拽目标元素过程中会触发的事件：
ondragstart：用户按下鼠标开始拖动时触发
ondrag：用户正在拖动时反复触发
ondragend：用户结束拖动后触发
<img id="imgs" ondragstart="startFun()" ondrag="ondragFun()" ondragend="ondragendFun()" src="../img/a.png"/>
当拖动元素进入目标容器内触发的事件：
ondragenter：鼠标拖动对象进入释放区时触发
ondragover：被拖动物体进入目标容器内移动时反复触发
ondragleave：拖动对象在释放区没有释放就离开容器时触发
ondrop：被拖动物体在目标容器内释放时触发
<div id="container" ondragenter="ondragenterFun(event)" ondragover="ondragoverFun(event)" ondragleave="ondragleaveFun()" ondrop="drop()"></div>
ondragenter和ondragover事件的默认行为是拒绝接受任何被拖放的项目, 所以我们必须要做的最重要的事情就是防止这种默认行为的发生。
因此, 我们只需要在这两个事件调用的函数中传入event对象, 使用event.preventDefault()就可取消这种默认行为；举个例子, 在drop事件时, Firefox浏览器会关闭网页, 转而显示被拖动图片img元素src所引用的地址。
取消元素默认行为：
function ondragenterFun(e){
e.preventDefault();
}
function ondragoverFun(e){
e.preventDefault();
}
在event对象中, 我们会使用dataTransfer属性来获取DataTransfer对象, 在DataTransfer对象中有我们操作数据的属性和方法, 具体如下：
datatransfer：转移释放元素的数据到释放区, 返回Datatransfer对象
event.dataTransfer //返回DataTransfer对象
DataTransfer对象的属性：
files：处理从操作系统拖动并释放到释放区的文件；
types：返回一个字符串数组, 该对象包含了dataTransfer对象中数据的所有类型；
items：返回DataTransferItems对象, 该对象代表了拖动数据；
dropEffect：设置拖放目标允许发生的拖放行为, 如果此处设置的拖放行为不在effectAllowed属性设置的可拖放行为内, 拖放操作将会失败。该属性值只允许为"null"、"copy"、"link"或"move"；
effectAllowed：设置拖动元素允许发生的拖动行为, 该属性值可为"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"或"uninitialized"；
DataTransfer对象的方法：
setData( format , data )：将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据。
getData( format )：从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。
clearData( [format] )：从dataTransfer对象中删除指定格式的数据，参数可选，若不给参数，将删除对象中所有的数据。
setDragImage(el, x, y)：设置拖放操作的图标，其中el代表自定义图标，x代表图标与鼠标在水平方向上的距离，y代表图标与鼠标在垂直方向上的距离。
了解了H5拖动使用的api以后我们接下来看一个综合的案例, 功能如下：
1)、实现图片拖动功能；
2)、实现图片复制功能；
3)、过滤不能拖动的元素；
4)、实现拖动本地图片到浏览器指定位置；
公共css部分：
<style>
#dropIn{
border:1px solid #AAAAAA;
height:100px;
margin-bottom: 10px;
padding: 10px;
}
#dropIn>img{
margin-right: 10px;
border:2px solid deepskyblue;
}
img{
width:100px;
border-radius: 10px;
border:2px solid red;
}
</style>
html部分：
<body>
<div id="dropIn"></div> <!--释放区-->
<img id="drop1" src="img/a.png" alt="" />
<!--拖动的图片元素-->
</body>
js部分：
<script type="text/javascript">
var darggID;
function getId(el){
return document.getElementById(el)
}
var dropId1 = getId("drop1");
var dropInId = getId("dropIn");
//取消事件默认行为
dropInId.ondragenter = cancelDefault;
dropInId.ondragover = cancelDefault; //绑定拖动元素释放时触发的事件
dropInId.ondrop = drop; //绑定
dropId1.ondragstart = startFun;
function cancelDefault(ev){ //取消默认行为
ev.preventDefault();
}
function startFun(ev){
darggID = ev.target.id;
//获取被拖动元素的id
//从源对象上的事件处理中保存数据，数据类型为"Text"
ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
ev.preventDefault();
// 从目标对象上的事件处理中读取"Text"类型数据
var data=ev.dataTransfer.getData("Text");
// 插入到目标对象中
ev.target.appendChild(document.getElementById(data));
}
</script>接下来我们添加两张图, "drop2"是实现复制的图片, "drop3"是既不能复制也不能拖动的图片；
<img id="drop2" src="img/b.png" alt="" /><img id="drop3" src="img/c.png" alt="" />
添加js代码：
//获取页面元素
var dropId2 = getId("drop2");
var dropId3 = getId("drop3");
//绑定事件
dropId2.ondragstart = startFun;dropId3.ondragstart = startFun;
//修改drop函数为
function drop(ev){
ev.preventDefault();
// 从目标对象上的事件处理中读取"Text"类型数据
var data=ev.dataTransfer.getData("Text");
if(data=='drop1'){
//移动
ev.target.appendChild(document.getElementById(data));
}
if(data=='drop2'){//复制
var nreEl=document.getElementById(darggID).cloneNode(false);
getId("dropIn").appendChild(nreEl);
}
if(data=='drop3'){//过滤drop3，drop3不做任何操作
alert('过滤drop3')
}
}
接下来我们实现拖动本地图片到浏览器, 我们就将图片拖动到id为"dropIn"的这个div中；添加js:
/*document 监听drop 并阻止浏览器打开客户端的图片*/
document.ondragover = function (e) {
//只有在ondragover中阻止默认行为
e.preventDefault();
};
document.ondrop = function (e) {
//阻止 document.ondrop的默认行为
e.preventDefault();
};
//dropIn是div的id
dropIn.ondrop = function (e) {
var list = e.dataTransfer.files;
for (var i = 0; i < list.length; i++) {
var f = list[i];
reader(f);
}
};
function reader(f) {
var reader = new FileReader();
//读取数据
reader.readAsDataURL(f);
reader.onload = function () {
var img = new Image();
img.src = reader.result;
dropIn.appendChild(img);
}
}
【浏览器支持】
目前只有Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari5支持拖放，在 Safari5.1.2 中不支持拖放。
最后再和大家分享一个技巧, 这种拖动行为还能跨浏览器工作, 这里说的跨浏览器不是浏览器之间的跨窗口, 而是可以从Chrome浏览器拖动到Firefox浏览器, 因为拖放功能的支持是集成在操作系统里面的, 有着相同的特性。
5中拖拽属性：
draggable： auto | true | false
拖动事件：
- dragstart 在元素开始被拖动时触发
- dragend 在拖动操作完成时触发
- drag 在元素被拖动时触发
释放区事件：
dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发
dragover 当被拖动元素在释放区内移动时触发
dragleave 当被拖动元素没有放下就离开释放区时触发
drop 当被拖动元素在释放区里放下时触发
案例： 实现div拖拽到指定区域效果：
效果：
初始效果：
拖拽过程中的效果：
拖拽到释放去 释放后的效果：
下面是这个操作的代码
*请认真填写需求信息，我们会在24小时内与您取得联系。
