拖放功能是HTML5标准的一部分.

拖动图片到另一个矩形框里.

拖拽和放下

拖拽和放下是很普通的特征.就是你把一个对象拖到另一个不同的位置.

在HTML5里,拖放是标准的一部分,任何元素都可以进行拖动.

HTML 拖放例子

下面的是一个简单的拖放例子:

它可能看起来很复杂,让我们来梳理一下拖动和放下事件.

让一个元素可拖动

首先:要让一个元素可拖动,设置dragable属性为true:

拖动什么 - ondragstart和setData()

然后,指定当元素被拖动时要发生什么.

在上面的例子中,ondragstart属性调用drag(event)函数,这指定拖动了什么数据.

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

在这个例子里,数据类型是"text"并且值是被拖动元素("drag1")的id.

在哪里放下 - ondragover

ondragover事件指定能在哪里放下被拖动的数据.

默认下,数据/元素不能在其它元素上放下.为了允许放下,我们必须阻止元素的默认处理.

只要调用event.preventDefault()方法就完成了ondragover事件:

处理放下操作 - ondrop

当被拖动的数据放下时,一个放下事件就发生了.

在上面的例子里,ondrop属性调用函数drop(event):

代码解释:

• 调用preventDefault()函数来阻止浏览器默认处理数据(放下事件默认是打开一个链接)
• 要获取被拖动的数据用dataTransfer.getData()方法.这个方法会返回所有用setData()方法设置的同型数据.
• 被拖动的数据是被拖动元素("drag1")的id,把被拖动元素附加进放下元素里.