html5 接收参数_HTML5-拖放

最近在摸鱼的过程中，发现了一个拖动组件，发现挺有意思的。于是想到在HTML5原生就支持这个功能，于是就想着自己也试着弄一个小demo试试看

提要

最早在网页中引入拖放功能的是IE4。当时，网页中只有两种对象可以拖放，图像和某些文本。拖动图像时，先把鼠标放在图像上，按住鼠标不放就可以拖动它。拖动文本时，要先选中文本，然后就可以想要拖动图像那样拖动。在IE4中，唯一有效的防止目标是文本框，到了IE5，拖放功能添加了新的时间，网页中几乎任意元素都可以作为目标元素。HTML5以IE的实例为基础制订了拖放规范。

案例

• 一个简单的拖拉

代码

拖动样式

通过div添加draggable属性为true之后，我们已经可以进行简单的拖动了。那么拖动已经是可以拖动了，我们需要另一个地方来接收拖动，所以我们对代码做了些修改

• 来回拖动案例

来回拖动案例

文字支持在两个框中拖动

需要注意的点1.需要设置要移动属性draggable的属性值为true才支持拖拽2.dataTransfer.setData设置了被拖动的数据类型和值3.dataTransfer.getData("Text") 方法获得被拖的数据。4.当放置被拖数据时，会发生 drop 事件，调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)。

API

• 拖动前

draggable元素是否可拖拽- true 可拖拽- false 不可拖拽- auto 跟随浏览器定义是否可以拖拽

• 绑定在拖拽目标

dragstart()- 当用户开始拖拽一个元素或者一个文本选取区块的时触发drag()- 当用户正在拖拽一个元素或者一个文本选取区块的时触发dragend()- 当用户结束拖拽一个元素或者一个文本选取区块的时触发

• 绑定在放置目标

dragenter- 当一个元素或文字选取区块被拖曳移动进入一个有效的放置目标时触发dragover- 当一个元素或文字选取区块被拖曳移动经过一个有效的放置目标时触发dragleave- 当一个元素或文字选取区块被拖曳移动离开一个有效的放置目标时触发dragexist- 当一个元素不再是被选取中的拖曳元素时触发drop-当一个元素或文字选取区块被放置至一个有效的放置目标时触发

• DataTransfer对象

属性- types 只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式的数组。 格式顺序与拖动操作中包含的数据顺序相同。- files返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。- dropEffect获取当前选定的拖放操作的类型或将操作设置为新类型[none、move、copy、link]- effectAllowed指定拖放操作所允许的效果[none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized]方法void setData(format, data)- 将拖动操作的拖动数据设置为指定的数据和类型。format可以是MIME类型String getData(format)- 返回指定格式的数据，format与setData()中一致void clearData([format])- 删除给定类型的拖动操作的数据。如果给定类型的数据不存在，此方法不执行任何操作。如果不给定参数，则删除所有类型的数据。void setDragImage(img, x, y)- 指定一副图像，当拖动发生时，显示在光标下方。大多数情况下不用设置，因为被拖动的节点被创建成默认图片。x,y参数分别指示图像的水平、垂直偏移量

兼容性

浏览器支持情况

总结

简单几行代码就实现简单拖拽效果，如果不使用原生drop要实现拖拽效果需要比较复杂，兼容性方面的问题也没有特别大的问题(IE除外)，相信在今后的工作中会有机会用到。当然在使用过程中也遇到一个问题，当放置被拖数据时，会发生 drop 事件，调用 preventDefault来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)，如果不使用preventDefault，则不会触发drop事件，则拖拽就不会触发。