HTML5 拖放API简单介绍

发表于2017-08-152019-01-01 作者 wind

使用方法主要为两个步骤：

1、给可以拖动的元素添加属性 draggable=‘true’，绑定dragstart事件，用于给传输对象保存内容，使用event.dataTransfer获取到数据传输对象，绑定selectstart事件，阻止默认行为，用于防止选中文本。

DataTransfer.clearData() Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect. DataTransfer.getData() Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data. DataTransfer.setData() Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position. DataTransfer.setDragImage() Set the image to be used for dragging if a custom one is desired.

2、给接收的元素添加drop事件阻止默认行为防止页面跳转，用来接收传输对象带来的数据，添加dragover事件阻止默认行为表示接收处理拖拽。