拖放

拖放是一个常见的功能，即抓取一个对象并将其拖动到另一个位置。

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

浏览器9、火狐、Opera、Chrome和Safari都支持拖拽。

注意：Safari 5 . 1 . 2不支持拖动。

示例：

！DOCTYPE html html head title拖放/title style type=' text/CSS ' # div 1 { width :360 px；height:220pxpadding:20pxborder:1px纯黑；} /style脚本函数allow drop(ev){ ev . Preventdefault()；}函数drag(ev){ ev . DataTransfer . Setdata(' Text '，ev . target . id)；}函数drop(ev){ ev . PreventDefault()；var data=ev . datatransfer . getdata(' Text ')；ev . target . appendchild(document . getelementbyid(data))；}/script/head body div id=' div 1 ' ondrop=' drop(event)' ondragover=' Allowdrop(event)'/div br/img id=' drag 1 ' src=' img/BG _ 1 . jpg ' drag able=' true ' ondragstart=' drag(event)' width=' 300 px ' height=' 180 px '/body/html

首先，为了使元素可拖动，将draggable 属性设置为true:imgdragable=' true '

然后，指定拖动元素时会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数drag(事件)，它指定了被拖动的数据。dataTransfer.setData() 方法设置拖动数据的数据类型和值：

函数drag(ev){ ev . DataTransfer . Setdata(' Text '，ev . target . id)；}

在本例中，数据类型为“文本”，值为drag1的id。

ondragover 事件指定放置拖动数据的位置。

默认情况下，数据/元素不能放入其他元素中。如果我们需要设置允许的放置，我们必须阻止元素的默认处理。

这是通过调用ondragover 事件'sevent.preventDefault() 方法:事件来完成的

放置拖动的数据时会发生拖放事件。

在上面的例子中，ondrop属性调用了一个函数，drop(event)：

函数drop(ev){ ev . Preventdefault()；var data=ev . datatransfer . getdata(' Text ')；ev . target . appendchild(document . getelementbyid(data))；}

代码解释：

调用preventDefault()以避免浏览器对数据的默认处理(丢弃事件的默认行为是作为链接打开)

通过dataTransfer.getData("Text") 方法.获取被拖动的数据这个方法会将任何数据集返回到setData()方法中的相同类型。

被拖动的数据是被拖动元素的标识(“拖动1”)

将拖动的元素附加到放置的元素(目标元素)

来回拖动：

要在两个地方来回拖动，只需稍微修改一下上面的代码。

将正文中的代码更改为：

body div id=' div 1 ' ondrop=' drop(event)' ondragover=' Allowdrop(event)' img id=' drag 1 ' src=' img/BG _ 1 . jpg ' draggable=' true ' ondragstart=' drag(event)' width=' 300 px ' height=' 180 px '/div id=' div 2 ' ondrop=' drop(event)' ondragover=' Allowdrop(event)'/div/body

然后将#div2添加到样式中：

style type='text/css' #div1，# div2 { width:360pxheight:220pxpadding:20pxborder:1px纯黑；} /style