js 拖放

it2022-05-05  217

一。说明:通过 draggable 属性设置元素是否可拖动。true 则可拖动,反之不行。

二。拖放API

(1)拖动元素时触发的API:

dragstart():开始拖动的时候触发。drag():拖动期间触发,dragstart 触发后就开始触发。dragend():拖动停止时触发。

(2)放置到目标元素时,触发的API:

dragenter():元素被拖动到放置目标上,就触发。dragover():在放置目标上移动时触发。dragenter 触发完就触发。dragleave():元素先被拖动到放置目标上后又拖出时触发。drop():拖动停止在放置目标时触发。触发改方法时需要阻止默认行为。event.preventDefault();

三。dataTransfer对象:主要拥有 getData() 和 setData() 这两个方法。

getData(name):用于获取setData 设置的值。setData(name, data):保存值到 dataTransfer 对象中。dropEffect:该属性可以知道被拖动的元素能够执行哪种放置行为。改属性只有搭配 effectAllowed 属性才有用。

none

不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。move应该把拖动的元素移动到放置目标。copy应该把拖动的元素复制到放置目标。link表示放置目标会打开拖动的元素(但拖动的元素必须是一个链接,有 URL)。 effectAllowed:属性表示允许拖动元素的哪种 dropEffect。 uninitialized没有给被拖动的元素设置任何放置行为。none被拖动的元素不能有任何行为。copy只允许值为"copy"的 dropEffect。link只允许值为"link"的 dropEffect。move只允许值为"move"的 dropEffect。copyLink允许值为"copy"和"link"的 dropEffect。copyMove允许值为"copy"和"move"的 dropEffect。linkMove允许值为"link"和"move"的 dropEffect。all允许任意 dropEffect。

 

setDragImage(element, x, y):指定一幅图像,当拖动发生时,显示在光标下方。这个方法接收的三个参数分别是要显示的 HTML 元素和光标在图像中的 x、y 坐标。

四。疑难杂症。

对于一些疑难杂症可以在触发事件时去阻止默认事情和阻止冒泡去解决。欢迎留言。


最新回复(0)