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

    春困夏乏秋打盹，最近懒癌要犯了，为了督促自己学习，小生制定了一个计划——每天收集/记录/学习一个小技巧~~~

    今天的小技巧如题，html5实现拖放以及利用mouse事件实现简单拖拽，本文将依次介绍，若有不妥之处，还望这位看官留言指正~~~

实例参考博客：

http://blog.youkuaiyun.com/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) {
   // 阻止浏览器默认事件