HTML5中拖放实现的详细解决方案
论HTML5中的拖放拖动（拖动）是一个共同的特点，就是拖到另一个位置的对象的捕获后，在HTML5拖放是一个标准的组成部分。在HTML5，用户可以用鼠标选择拖动元素，拖动元素到一个位置的元素，并释放鼠标按钮释放这些按钮，拖动操作期间的阻力元件的半透明鼠标指针表示如下。
如果我们想要的元素被拖动，然后我们需要设置其属性为true（拖动标签拖动默认是真的）
拖放事件
几个事件在拖放操作的不同阶段和数据传输性能引发的拖放事件存储相关数据的拖放操作。
拖曳开始
它作用于{ }源元素，当元素开始被一拖再拖，拖拖，用户需要将拖曳开始事件的元素。在这种情况下，听者会设置阻力的相关信息，如把数据和图像。
DragEnter
它在{源元素}上起作用，当拖动鼠标进入一个元素时触发。这个事件的侦听器需要指定是否允许在这个区域释放鼠标。如果监听器没有设置，或者监听器不被操作，则默认情况下不允许释放它。
德雷弗
当鼠标拖动由元素触发时，它作用于{目标元素}。
dragleave
它作用于{目标元素}和触发器时，拖动鼠标离开元。它可以作为一个突出或释放反馈插入标记去除。
拖
它对源元素起作用，并且在拖动元素时触发事件。
滴
它作用于{目标元素}，并在拖放操作发布时在释放元素上触发。
dragend
它对源元素起作用，拖动源在拖放操作结束时触发，不管操作是否成功。
（拖动时才触发通过拖放相关事件，鼠标事件，如MouseMove，不会被触发。）
DataTransfer对象
当处理拖放操作，我们需要使用数据传输对象保存拖data.datatransfer可以保存一个或更多的数据，一个或多个数据类型。
属性
dropeffect
dropeffect
{指定实际的放置效果，可能的值：
复制：复制到新位置
移动：移动到一个新位置
链接：建立从源位置到新位置的链接。
禁止：禁止放置（禁止任何操作）
effectallowed
{当允许拖动时，{指定允许的效果，可能的值：
复制：复制到新位置。
移动：移动到一个新位置。
链接：建立从源位置到新位置的链接。
复制链接：允许你复制或链接。
copymove：允许你复制或移动。
LinkMove：允许链接或动作。
所有：允许所有操作。
禁止：禁止所有操作。
初始化：默认值（默认），相当于所有。
文件夹
包含数据传输中所有可用的本地文件的列表。如果拖动操作不涉及拖放文件，则此属性为空列表。
类型
将存储的数据列表保存为第一个项目，顺序与添加的数据的顺序一致。如果没有添加数据，则返回空列表。
方法
无效addElement（元）
设置阻力源。通常不需要改变这个项目，如果修改会影响阻力的dragend事件触发的节点，拖动节点的默认目标
无效cleardata（String类型）
删除与给定类型相关联的数据。类型参数是可选的。如果类型为空或未指定，则所有类型的相关数据都将被删除。如果没有指定类型的数据，或者数据传输不包含任何数据，则此方法将不起作用。
字符串GetData（String类型）
如果获得给定类型的数据，如果给定类型的数据不存在，或者数据传输不包含数据，则方法将返回空字符串。
void setData（字符串类型，字符串数据）
设置给定类型的数据。如果数据类型不存在，它将被添加到结尾，这样一个类型列表中的最后一项将是一种新格式。如果已经存在的数据类型替换相同位置的现有数据。也就是说，当替换相同类型的数据时，类型列表的顺序不会更改。
Void setDragImage (DOMElement image, long x, long y)
自定义所需拖动的图片。在大多数情况下，此项不会设置，因为拖动的节点被创建为默认图片。
用作拖动反馈图像元素的图像
x图像中的水平偏移量。
y是图像中的垂直偏移量。
浏览器支持
IE浏览器+ 9，火狐，Opera 12，Chrome，Safari 5 +
演示代码
拖放
{。箱
显示：内联块；
宽度：100px；
身高：100px；
边境：1px solid # ccccff；
背景颜色：# ccccff；
文本对齐：中心；
行高：100px；
}
{。仓
宽度：200px；
身高：200px；
填料：10px；
边境：1px solid # ccccff；
溢出：隐藏；
浮点数：左；
}
拖放元素
VaR箱= document.queryselectorall（'仓'）；
VaR盒= document.queryselectorall（'盒子'）；
var = null；
对于（var i = 0；i < boxs.length；i++）{
VaR箱=盒{我}；
box.onselectstart =函数（）{
返回false；
}；
box.ondragstart =功能（e）{
e.datatransfer.effectallowed = 'move；
e.datatransfer.setdata（中/平原，e.target。outerHTML）；
E.dataTransfer.setDragImage（e.target，0, 0）；
拖动=此；
返回true；
}；
box.ondragend =功能（e）{
拖动= null；
返回false
}；
}
对于（var i = 0；i < bins.length；i++）{
var =垃圾箱{ }；
当将元素拖入目标元素时
bin.ondraver =功能（e）{
E.preentDefault（）；
返回true；
}；
在目标元素上拖动移动元素
bin.ondragenter =功能（e）{
this.style.backgroundcolor =# eeeeff；
返回true；
}；
拖动目标元素中的元素。
bin.ondragleave =功能（e）{
this.style.backgroundcolor =# FFF；
返回true；
}；
拖动目标元素中的元素并释放鼠标
bin.ondrop =功能（e）{
如果（拖动）{
drag.parentnode.removechild（拖）；
this.appendchild（拖）；
}
this.style.backgroundcolor =# FFF；
返回false；
}；
}
document.body.ondrop =功能（e）{
E.preventDefault（）；
e.stoppropagation（）；
}
以上是HTML5中的拖放相关资料，有需要的朋友可以参考一下。