拖放#xff08;Drag

Drop#xff09;接口使应用程序能够在浏览器中使用拖放功能。

例如#xff0c;用户可使用鼠标选择可拖拽#xff08;draggable#xff09;元素…介绍

HTML5

Drop接口使应用程序能够在浏览器中使用拖放功能。

例如用户可使用鼠标选择可拖拽draggable元素将元素拖拽到可放置droppable元素并释放鼠标按钮以放置这些元素。

事件类型

型事件处理程序触发时刻dragondrag当拖拽元素或选中的文本时触发。

dragendondragend当拖拽操作结束时触发

(比如松开鼠标按键或敲

键)。

dragenterondragenter当拖拽元素或选中的文本到一个可释放目标时触发。

dragleaveondragleave当拖拽元素或选中的文本离开一个可释放目标时触发。

dragoverondragover当元素或选中的文本被拖到一个可释放目标上时触发每

100

毫秒触发一次。

dragstartondragstart当用户开始拖拽一个元素或选中的文本时触发。

dropondrop当元素或选中的文本在可释放目标上被释放时触发。

注意当从操作系统向浏览器中拖拽文件时不会触发

dragstart

对象也有获取拖拽项目数据的方法DataTransferItem.getAsFile()

DataTransferItem.getAsString()。

DataTransfer

拖拽选中文本、拖拽图像和拖拽链接时会使用默认拖拽行为。

拖拽图像或链接时图像或链接的

URL

被设定为拖拽数据。

对于其他元素只有当它们作为被选中的一部分时才会触发默认拖拽行为。

除了图像、链接和选择的文本默认的可拖拽行为之外其他元素在默认情况下是不可拖拽的。

如果要使其他的

HTML

ondragstartevent.dataTransfer.setData(text/plain,

This

1.设置要拖拽的元素绝对定位或是相对定位position:absolute/relative。

2.监听

为大家准备了一个前端资料包。

包含54本2.57G的前端相关电子书《前端面试宝典附答案和解析》难点、重点知识视频教程全套。