HTML5拖拽上传 ／ 2-2 传统拖拽的简单实现（脚本部分）
事件中触发的匿名函数内的参数e代表这个事件。
设置一个变量，记录鼠标是否按下，判断鼠标按下的时候再执行移动的事件（否则鼠标没按下的时候一直执行事件，浏览器会崩溃）
在设置一个空对象，存放鼠标移动后的位置。
设置鼠标按下，移动，和松开的事件。
最新的位置就是原本的top和left加上鼠标移动的距离，鼠标移动的距离为e.pageX-起初鼠标点击时的距离。
每触发一次移动事件，就要更新一次当前的位置，也就是时刻更新当前位置，否则会有问题。
当鼠标松开的时候，要初始化鼠标，并初始化位置。
移动事件绑在document上不会让鼠标抛出div外部。
pageX指的是鼠标在页面上的位置，从页面左上角开始，即是以页面为参考点，不随滑动条移动而变化
clientX指的是鼠标在页面上可视区域的位置，从浏览器可视区域左上角开始，即是以浏览器滑动条此刻的滑动到的位置为参考点，随滑动条移动 而变化。
HTML5拖拽上传 ／ 2-4 实现鼠标事件位置的4种方式
实现鼠标事件位置的4中方式：
e.clientX / e.clientY：鼠标到浏览器视口左上角的位置（不包括浏览器任务栏），并且，无视滚动，左上角都是为0。
e.pageX / e.pageY：与上方基本相同，唯一不同的是，需要计算滚动的高宽。
e.offsetX / e.offsetY：鼠标到最近的父元素左上角的距离。
e.screenX / e.screenY：鼠标到整个电脑显示屏左上角的距离。
HTML5拖拽上传 ／ 3-1 HTML5拖拽的语法
html5拖拽基础知识： -draggable=true； -拖拽事件 -dataTransfer对象
HTML5拖拽上传 ／ 3-2 HTML5拖拽语法的小案例
为被拖拽元素添加属性：
draggable="true";//可拖拽
ondragstart="dragstart(event)";//引号内部是一个函数，利用函数控制
为目标容器添加属性：
ondrop="drop(event)";//引号内也是函数。
ondropover="dragover(event)";//同理。被拖拽元素进入目标区域时会不停触发，只有在目标区域时才会触发，松开鼠标停止。
e.target;//获取事件的目标元素
e.dataTransfer.setData( "Text", e.target.id );//保存一个数据类型为Text的数据，第一个参数为数据类型，第二个为数据。
e.dataTransfer.getData("Text");//获取。
e.preventDefault();//默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放。
e.target.appendChild('dom对象');//引号内的dom对象是被拖拽元素，这里将被拖拽元素放入容器目标中
这里因为event没有在其他地方被定义，因此，这样写ondrop="drop(event)"的目的是为了实现IE和火狐浏览器中event的传递。
因为在IE中，event是全局的（即：公用的）相当于window.event，而火狐浏览器中的event则是必须存在事件中，必须要写。
为了兼容浏览器，即都能在两个浏览器上正常运行，所以绑定的js事件函数默认传递的参数是event，这里的event在IE上指window.event简写event，在火狐浏览器中则是事件onchange固有的参数e，简单的理解就是为了兼容浏览器的。
ondrop="drop(event)";不能写成drop(e); 因为window对象中没有e属性，只有event属性。
这里不仅仅是一个参数，是有实际意义的。相当于把鼠标的event对象传递进去了，因为这个是鼠标拖动的事件。
HTML5拖拽上传 ／ 3-3 拖拽详解
在容器目标中绑定还可绑定事件
ondragenter="dragenter(event)";//鼠标拖拽进入容器（轮廓触碰容器都算，一碰就触发）时触发事件。
ondragleave="dragleave(event)";//鼠标拖拽离开容器时触发事件。
ondragend="dragendContainer(event)";//拖拽到进入容器的区域松开鼠标后就会触发此事件
还可为被拖拽元素添加事件：
ondrag="drag(event)";//拖拽的时候会不停触发这个事件，就算鼠标停止也会不停触发。
ondragend="dragendTarget(event)";//拖拽到无论哪个区域松开鼠标后就会触发此事件
e.dataTransfer.setDragImage(图片的dom元素, 图片的position-x, position-y);//改变拖拽时鼠标下的图片;
在所有的拖拽事件中都提供了一个数据传递对象就是datetransfer，用于在源对象和目标对象之间传递数据。
传递数据就是为了实现拖拽。
比如：一个div（div1）想要拖拽到另一个div（div2）元素中，那么可以将div1中的id值传递过去，当div2接收到数据的时候，直接通过传递的id值获取div1元素，然后追加到div2中就可以了。
HTML5拖拽上传 ／ 4-3 拖拽问卷（3）
jQ中使用append()方法追加东西（东西就是参数的东西）在元素之后。 find()方法查找后代所有满足的子元素。不是直接后代，是所有后代 clone()复制元素。
HTML5拖拽上传 ／ 5-1 实例--拖拽拼图
(function($) {})(jQuery);//这样不会污染程序空间。
通过jQuery获取到原始对象的数据：e.originalEvent.dataTransfer.setData('key', value);【这里的e.originalEvent是事件里的event，JQ将其封装了起来。但是window对象上的event仍旧是e】
ondragover事件必须添加e.preventDefault();否则不会生效。
HTML5拖拽上传 ／ 6-2 拖拽文件上传案例JS（1）
拖拽文件上传js编写步骤：
目标对象绑定dragenter事件 在里头判断tips（提示）是否还存在，若存在，则改变文字（松开鼠标即可上传），目标对象的边框发生变化表示enter事件发生；
在绑定dragleave事件，在里头判断tips（提示）是否还存在，若存在，则改变文字（拖动文件至此区域即可上传），删除目标对象的边框；
再绑定dragover事件，添加e.preventDefault();//取消默认事件；
再绑定drop事件，添加e.preventDefault()，在里头判断tips（提示）是否还存在，若存在，则移除提示（添加display：none），并把文件放置的地方显示出来，（起初是设置为display：none的）display: block，并把边框变回颜色，
接着依旧在这个事件中获取文件，可以从e.dataTransfer.files（jQ中用e.originalEvent.dataTransfer.files），
接下来需要遍历获取文件，因为上传的文件可能是多个，所以files是一个数组，
接着复制上传的这个列表（目的是把这个列表放置到显示这个列表的区域），并获取里面name（把file的name属性获取到，送给显示name的区域），进度progress，图标，最后定义一个显示进度条动画的函数，传入file，progress，图标。并判断在一定条件下progress的样式变化并设置。
preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。
如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件发生时要进行的操作，通过调用preventDefault方法，可以阻止提交表单。
event.stopPropagation()方法不能阻止同一个Document节点上的其他事件被调用。
拖拽插件2-Dragdealer.js： 地址：skidding.github.io/dragdealer/
jQuery拖拽插件：pep.briangonzalez.org