h5页面拖拽选择数字到指定位置_H5 拖拽,一个函数搞定,直接指定对象设置可拖拽...

页面上，弹个小窗体，想让它可以拖拽，又不想 加载一堆js，就简单的能让他可以拖动？ 嗯，下面有这样一个函数,调用下就好了！

1. 先来说说 H5的 拖拽

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

拖动开始 - ondragstart 和 setData()

当元素被拖动时，要发生什么。

如，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

functiondrag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

在这个例子中，数据类型是 "Text"，值是被拖动元素的 id 。

拖动正在进行 - ondrag

此事件为元素正在被拖动的过程中触发的，不断触发。

拖动完成 - ondragend

此时用户松开鼠标，拖动结束了，该干嘛干嘛去。

当然，要不要吧哪个元素的位置移动下？

被拖动的元素进来了 - ondragenter

被鼠标拖动的对象进入其容器范围内了。是不是要准备 接收这个拖来的元素，安排个位置?

放到何处 - ondragover