网站建设和运营,义乌营销型网站建设,论坛网站开发技术,网站后台功能介绍 HTML5 提供了专门的拖拽与拖放的 API#xff0c;目前各浏览器都已支持#xff0c;包括 IE。HTML 拖放#xff08;Drag and Drop#xff09;接口使应用程序能够在浏览器中使用拖放功能。例如#xff0c;用户可使用鼠标选择可拖拽#xff08;draggable#xff09;元素…介绍 HTML5 提供了专门的拖拽与拖放的 API目前各浏览器都已支持包括 IE。HTML 拖放Drag and Drop接口使应用程序能够在浏览器中使用拖放功能。例如用户可使用鼠标选择可拖拽draggable元素将元素拖拽到可放置droppable元素并释放鼠标按钮以放置这些元素。
事件类型
事件On 型事件处理程序触发时刻dragondrag当拖拽元素或选中的文本时触发。dragendondragend当拖拽操作结束时触发 (比如松开鼠标按键或敲 Esc 键)。dragenterondragenter当拖拽元素或选中的文本到一个可释放目标时触发。dragleaveondragleave当拖拽元素或选中的文本离开一个可释放目标时触发。dragoverondragover当元素或选中的文本被拖到一个可释放目标上时触发每 100 毫秒触发一次。dragstartondragstart当用户开始拖拽一个元素或选中的文本时触发。dropondrop当元素或选中的文本在可释放目标上被释放时触发。注意当从操作系统向浏览器中拖拽文件时不会触发 dragstart 和dragend 事件。 接口
给应用程序添加 HTML 拖放功能主要使用 DragEvent 和 DataTransfer 这两个接口。
DragEvent
继承自 MouseEvent有一个 dataTransfer 属性DataTransfer 对象在拖放交互期间传输的数据主要通过这个属性完成。
DataTransfer
保存着拖拽操作中的数据例如拖拽事件的类型如拷贝 copy 或者移动 move拖拽的数据一个或者多个项和每个拖拽项的类型MIME 类型。
items 属性
包含包含所有拖动数据 DataTransferItem 对象的列表DataTransferItemList 对象包括 add、remove 和 clear 方法。一个 DataTransferItem 代表一个拖拽项目每个项目都有一个 kind 属性值为 string 或 file和一个表示数据项目 MIME 类型的 type 属性。DataTransferItem 对象也有获取拖拽项目数据的方法DataTransferItem.getAsFile() 和 DataTransferItem.getAsString()。 DataTransfer 对象使用同步的 getData() 方法去得到拖拽项的数据而 DataTransferItem 对象使用异步的 getAsString() 方法得到拖拽项的数据。 files 属性
包含数据传输中可用的所有本地文件的列表FileList 对象。如果拖动操作不涉及拖动文件则此属性为空列表。
HTML draggable 属性
这个属性是枚举类型而不是布尔类型。这意味着必须显式指定值为 true 或者 false而不能简写。
拖拽选中文本、拖拽图像和拖拽链接时会使用默认拖拽行为。拖拽图像或链接时图像或链接的 URL 被设定为拖拽数据。对于其他元素只有当它们作为被选中的一部分时才会触发默认拖拽行为。
除了图像、链接和选择的文本默认的可拖拽行为之外其他元素在默认情况下是不可拖拽的。如果要使其他的 HTML 元素可拖拽
1.将想要拖拽的元素的 draggable 属性设置成 draggable“true”。 2.为 dragstart 事件添加监听。 3.在定义的监听中设置拖拽数据。
p draggabletrue ondragstartevent.dataTransfer.setData(text/plain, This text may be dragged)This text strongmay/strong be dragged.
/p 拖拽删除元素
拖拽右侧的列表项目到左侧时在列表项目元素中通过 ondragstart 事件获取到当前的拖拽元素然后在左侧容器元素中通过 ondrop 事件根据当前的拖拽元素可以删除该列表项目。
拖拽排序
拖拽列表项目时在列表项目元素中通过 dragstart 事件获取到当前的拖拽元素和事件的 offsetY然后在列表容器元素中通过 dragover 事件根据当前拖拽移动在上面的列表元素事件的 offsetY对比当前拖拽中的元素的 offsetY对当前拖拽移动在上面的列表元素进行 before 或 after 操作。
拖拽预览图片
从本地拖拽文件到页面中时通过获取 DragEvent 的 DataTransfer 对象的 files 属性然后由 URL.createObjectURL 创建对象 URL可以预览该图片。
拖拽效果
HTML Drag and Drop API 方便了我们对拖拽数据的处理如果需要实现 HTML 元素的拖拽移动更加方便地是使用 mouse 事件。
1.设置要拖拽的元素绝对定位或是相对定位position:absolute/relative。 2.监听 onmousedown、onmouseup 和 onmousemove 事件获取 clientX 和 clientY。 3.将获取到的 clientX 和 clientY 赋值给元素的 CSS 属性 left 和 top。
最后
为大家准备了一个前端资料包。包含54本2.57G的前端相关电子书《前端面试宝典附答案和解析》难点、重点知识视频教程全套。 有需要的小伙伴可以点击下方卡片领取无偿分享
