关于HTML实现拖放时出现禁止图标的解决方案

最新推荐文章于 2023-12-17 22:34:38 发布

weixin_34021089

最新推荐文章于 2023-12-17 22:34:38 发布

阅读量4.3k

点赞数 4

原文链接：http://www.cnblogs.com/wcrBlog/p/6856524.html

版权

HTML5拖放操作API

如果网页元素的draggable元素为true，这个元素就是可以拖动的。

<div draggable="true">Draggable Div</div>

在大多数浏览器中，a元素和img元素默认就是可以拖放的，但是为了保险起见，最好还是加上draggable属性。

拖动过程会触发很多事件，主要有下面这些：

调用示例：

draggableElement.addEventListener('dragstart', function(e) {
    console.log('拖动开始！');
});

dataTransfer对象的属性：

dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法：

setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。

本次试用遇到的问题：

在拖放的过程中遇到当一个div上有其他元素，例如P、label、img等，在拖动到P、label时会出现禁止拖动的图标

分析及解决方案：

拖动到的“目的地”并不接受拖动的元素-----这是因为当拖动元素经过document时，document对象默认阻止了拖动事件，而其他HTML组件也位于document对象内，因此它们也不能接受“放”。

因此我们需要将目标元素加两个事件ondragenter ondragover事件内容为event.preventDefault()

转载于:https://www.cnblogs.com/wcrBlog/p/6856524.html

关注