在h4标准中，我们定义个拖拽事件是很麻烦的，用原生的js来实现拖拽的效果。我们需要计算拖拽的元素的坐标位置和距离之差。在mouseup mouseover mousedown 这些的鼠标点击的事件来进行操作的。我们要通过js元素中的相关的属性 offsetwidth 重新赋值给元素的宽度。width = offsetwidth+'px';还有定位。来进行计算差值。还有取消mouseover事件的。来实现放下功能的 。在现在的h5下，我们可以不必折腾的实现拖拽事件了，重新定义了拖拽事件的API接口,来帮助我们实现拖拽事件的效果的完成。还有重要的在元素拖拽的时候，用来传递数据的对象：DataTransfer 这个是在事件对象event下的一个属性。在我们的拖拽的时候，我们可以要把数据来进行传递，可以通过这个属性来进行传递。
1：在DataTransfer中，我们有两个方法是setData（）和getData（），来进行获取元素的相关的id值和类选择。我们可以通过这两个方法来在拖放事件中来进行获取数据。其中，setData()是在拖放开始的时候来进行设置数据。而getData是在拖放事件中的放下来获取数据，在拼接文档流中。
2：拖拽开始：dragstart :是来在被拖拽的元素的绑定上，我们可以在拖拽开始的时候进行设置被拖拽元素的相关的数据。注意：我们理论上，我们可以把任何元素的可以拖拽的。img标签是自带的drag属性的。其他元素就没有自带这个属性。我们可以通过draggable = 'true' 来进行设置可以拖放的。当然，我们也可以通过设置draggable='false' 来进行设置不能被拖放的。
3：dragenter: 拖拽进入。这个事件是进入目标元素的来触发的。所以，这个事件是绑定在目标元素上的。拖进元素进入目标。当然，我们可以在拖进目标元素的时候，可以加效果。
4：dragover:拖拽移动的事件。是在被拖拽的元素在目标元素上进行移动上来触发事件，作用在目标元素的。是重复执行的，所以也是会造成一些麻烦，会阻挡drop事件的执行的。所以，我们要在drop事件之前要取消默认的dragover事件来进行执行drop事件，也就是说，drop和dragover事件是一块出现的。取消默认的事件方法有两个：return fasle和e.preventDefault();
5:dragleave: 是用户拖拽时，可以离开目标元素的反复操作的。也开始加点动画效果。这个作用在目标元素的。在这里可以添加移出效果的。
6：drop:拖拽事件的放下事件。可以通过这个事件的来进行把被拖拽的元素方放进目标里，来进行拖拽效果的实现。这一步是很关键的。可以获取被拖拽的元素的数据。通过e.dataTransfer.getData('idName'),来进行获取被拖拽的数据的。通过以下方法来进行。
var id = e.dataTransfer.getData('idName');
var imgTag = document.getElementById(id);
// 拼接到文档流中。就可以了。数据也可以传递过来。我们这样的话，可以减少全局的变量。优化性能。
我们可以通过其他的方式来进行文件上传的操作的。本地磁盘的文件的上传，到我们的指定的目标元素。可以先通过e.dataTransfer.files[0];来获取文件的路径。我们可以看看我们的具体的例子。
