html5实现拖放以及mouse事件实现简单拖拽

    春困夏乏秋打盹，最近懒癌要犯了，为了督促自己学习，小生制定了一个计划——每天收集/记录/学习一个小技巧~~~
    今天的小技巧如题，html5实现拖放以及利用mouse事件实现简单拖拽，本文将依次介绍，若有不妥之处，还望这位看官留言指正~~~
实例参考博客： http://blog.csdn.net/baidu_31333625/article/details/53811510 //===============================================================
一、html5实现拖拽
html5实现拖拽的过程十分类似于煎鸡蛋 ╮(╯▽╰)╭
鸡蛋 = 被拖拽物体，平底锅 = 拖拽放入的目标元素
（1）确定这颗鸡蛋有没有坏掉，放好平底锅——确定元素是否可拖动，即 被拖拽物体 的draggable=true？，添加 目标元素

<div id="targetObj"></div>

<i id="ball" class="ball" draggable="true"></i>（2）打碎鸡蛋做好准备——给 被拖拽物体 添加 dragstart 事件监听，在拖拽开始后触发，只触发一次document.getElementById('ball').addEventListener('dragstart',function(event){
//开始拖拽
//dataTransfer对象只用于拖拽事件中，用来存储拖拽数据，text/url类型，本次存储内容为标签id
event.dataTransfer.setData('Text',event.target.id);
console.log('针对被拖拽物体，开始拖拽: '); //用于查看拖拽的整个过程中事件发生顺序
});（3）把鸡蛋平移到平底锅上方——给 目标元素 添加 dragenter事件监听，在 被拖拽元素 移动进 目标元素 时触发，每次进入都会触发，一次进入过程触发一次 document.getElementById("targetObj").addEventListener("dragenter", function(event) {
// 阻止浏览器默认事件
event.preventDefault();
console.log('被拖拽物体进入目标对象')
}, false);（4）在平底锅上方摇晃鸡蛋表示感恩——给 目标元素 添加 dragover事件监听，在 被拖拽元素 进入 目标元素 时触发，只要一直在 目标元素 内部移动就会一直触发document.getElementById('targetObj').addEventListener('dragover',function(event){
// 阻止浏览器默认事件
event.preventDefault();
console.log('被拖拽物体在目标对象中移动')
});（5）把鸡蛋倒进平底锅——给 目标元素 添加 drop事件监听，在 目标元素 中放开 被拖拽元素 时触发，只触发一次

document.getElementById('targetObj').addEventListener('drop',function(event){
// 阻止浏览器默认事件
event.preventDefault();
var data=event.dataTransfer.getData("Text");//读取dragstart触发时存入的 被拖拽元素id
event.target.appendChild(document.getElementById(data));//在目标元素中添加 被拖拽元素 节点
document.getElementById(data).style = 'top: 60px;left: 60px;'; //修改 被拖拽元素 样式
console.log('放置事件')
});

到这一步，已经基本完成拖拽功能了~~~控制台打印 如下





更多drag事件：（引用自：http://blog.csdn.net/baidu_31333625/article/details/53811510）

事件	产生事件的元素	描述
dragstart	被拖放的元素	开始拖放操作
drag	被拖放的元素	拖放过程中
dragenter	拖放过程中鼠标经过的元素	被拖放元素开始进入本元素的范围内
dragover	拖放过程中鼠标经过的元素	被拖放元素正在本元素范围内移动
dragleave	拖放过程中鼠标经过的元素	被拖放元素离开本元素的范围
drop	拖放的目标元素	有其他元素被拖放到本元素中
dragend	拖放的对象元素	拖放操作结束

dataTransfer对象
更详细介绍：https://jingyan.baidu.com/article/6dad5075cf6e62a123e36e11.html http://blog.csdn.net/liangklfang/article/details/48628171

属性	描述
dropEffect	表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果范围内，允许指定的值有：none、copy、link、move。
effectAllowed	用来指定当元素被拖放时所允许的视觉效果。可以指定的值有：none、copy、copyLink、copyMove、link、linkMove、all、uninitialize。
files	返回表示被拖拽文件的 FileList。
types	存入数据的MIME类型。如果任意文件被拖拽，那么其中一个类型将会是字符串”Files”。

方法	描述
void setData(DOMString format, DOMString data)	向DataTransfer对象存入数据。
DOMString getData(DOMString data)	读取DataTransfer对象中的数据。
void clearData(DOMString format)	清除DataTransfer对象中的数据。如果省略参数format，则清除全部数据。
void setDragImage(Element image, long x, long y)	用img元素来设置拖放图标。

二、mouse事件实现简单拖拽实现原理：
mousedown + mousemove = dragstart事件
mouseup = dragend事件
被拖拽物体偏移 = 当前鼠标位置
具体实现：
（1）定义可拖放区域，以及被拖拽物体
（注：这里 被拖拽物体（ball）使用position：absolute布局
    拖拽区域（targetArea）大小 = 可见页面大小）<div id="targetArea"></div>
<i id="ball" class="ball"></i>（2）给 被拖拽物体 添加mousedown事件监听器；
         给 拖放区域 添加mousemove事件监听器以及mouseup事件监听器document.getElementById('ball').addEventListener('mousedown',function(){
mousedown = true; //全局变量，用于判断是否停止拖拽
});
document.getElementById('targetArea').addEventListener('mousemove',function(ev){
//获取当前鼠标位置
dragStart(ev); //拖拽实现
});

document.getElementById('targetArea').addEventListener('mouseup',function(){
mousedown = false;
});

（3）dragStart方法实现拖拽偏移function dragStart(ev){
if (mousedown) {
var targetX = ev.clientX, //当前鼠标位置
targetY = ev.clientY;
el.style = 'top:'+targetY+'px;left:'+targetX+'px';
}
}到这一步，基本完成了，开心的测试了一下~(*^▽^*)~然后···ummmmm，怎么小球黏在鼠标上甩不掉了(╥﹏╥)在测试了一下程序，mouseup事件消失了，消失原因在于，当光标在小球（被拖拽物体）内部时未触发mouseup事件，只有在外部才触发。知道了问题所在，解决方案就so easy了，直接给小球也加上mouseup事件监听document.getElementById('ball').addEventListener('mouseup',function(){
mousedown = false;
});这下基本功能完成了，但是美中不足啊。理想的拖拽效果是鼠标与光标的相对位置保持不动，但无论怎么拖拽，光标最后都会到达元素左上角。不过这个问题好解决：记录元素初始位置坐标，光标初始位置坐标与当前位置坐标，后者之间的偏移应用到前者。过程不在此赘述。最后移动效果如下