一文搞懂drag&drop浏览器拖放功能的实现

       拖放功能,即将一个元素从一个区域,通过拖拽,放置到另一个区域。常见的应用是将文件或图片从一个区域,拖放到另一个区域。中文常常把这表述成拖拽,实际上拖拽的描述并不准确,应该叫拖放,因为drag事件和drop事件是成对使用的,即拖拽和放置。

       drag在拖拽动作发生时触发,携带被拖拽元素的信息,drop在放置元素时触发,接收传递的拖拽元素的信息。

       由于常常表述成拖拽,所以有些人在实现拖动功能时以为会触发drag事件,比如侧边栏拖拽。实际上drag是为拖放功能设计的(要配合drop),拖动(or拖拽)的功能应该用mousemove事件去实现,用错事件就会觉得怎么拖拽功能好难啊。

P.S.

drag和mousemove事件都是在移动鼠标的过程中触发,所以两个事件是会冲突的,如果发现其中一个事件不生效,可以检查下是不是因为有元素绑定了其中一个事件,导致另一个事件没有trigger。

具体实现

       拖放,拖拽和放置,那么自然需要一个拖拽的区域,和一个放置的区域。

       首先,要定义允许拖拽的元素。浏览器的默认行为是,文本、图像和链接是允许拖拽的。即<p>、<img>、<a>标签是默认允许拖拽的,其他元素要允许拖拽,则要设置draggle="true"。这个属性不允许简写。<div draggable ></div>并不会生效。

  其次,要定义拖拽的数据。比如,拖拽的是文本,则设置成文本格式,并设置拖拽的数据内容。拖拽的是图片,则设置成图片格式,设置数据内容。定义成图片格式,那么拖拽的时候,鼠标旁边就会显示一张设置的图片。设置的拖拽数据可以有多个。

      先给拖拽的元素绑定dragstart事件,再设置dataTransfer。示例代码如下:

function dragstart_handler(ev) {
  // 添加拖拽数据
  ev.dataTransfer.setData("text/plain", ev.target.innerText);
  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
  ev.dataTransfer.setData(
    "text/uri-list",
    ev.target.ownerDocument.location.href,
  );
}

       拖放相关的事件对象event中,有一个dataTranster属性,这个属性保存着拖放过程中的数据。并有一些属性和方法设置和操作这些数据。

       比较常用到的属性和方法有:

dropEffect:设置放置操作的类型,可以修改放置时鼠标的显示。比如设置成none,鼠标就会显示成禁止的样式。

effectAllowed:设置拖放过程的操作类型,同样影响鼠标的显示。

setData():设置拖放的数据。一般会在dragstart事件中用到。一个事件中,setData可以设置多个数据。但同类型的数据只能添加一项,重复添加会被最后添加的覆盖。

getData():检索获取拖放的数据。一般会在drop事件中用到。

       具体可以参考MDN文档。

       最后,就是在drop区域中放置拖拽的元素。

       一个代码示例:

function drop_handler(ev) {
  const data = ev.dataTransfer.getData("text/plain");
  ev.target.textContent = data;
}

       这样,拖放就结束了。拖放功能也完成了。

       在拖放过程中,有一些全局事件触发,可以参考下表,具体请查看MDN文档。

事件 触发时刻
drag 当拖拽元素或选中的文本时触发。
dragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). 
dragenter 当拖拽元素或选中的文本刚进入到一个可释放目标时触发。
dragleave 当拖拽元素或选中的文本离开一个可释放目标时触发。
dragover 当元素或选中的文本被拖到一个可释放目标上时触发(每 100 毫秒触发一次)。
dragstart 当用户开始拖拽一个元素或选中的文本时触发。
drop 当元素或选中的文本在可释放目标上被释放时触发。

一些问题

但是,这样实现拖放功能会有一些体验问题,鼠标的样式显示可能不正确。

以下是一些可能的问题:

1.禁止放置的区域没有显示禁止图标。

在区域上绑定dragover事件,设置dataTransfer.dropEffect='none'并禁止默认行为e.preventDefault()

2.禁止放置的区域可以放置。

通常默认可以放置的区域是一些输入标签,比如<input>、<textarea>。在drop事件中,禁止默认行为e.preventDefault()可以禁止放置。

3.拖拽过程和可放置区域中,鼠标显示禁止图标。

在经过或者放置的区域上,在dragover和dragenter事件中禁止默认行为e.preventDefault(),设置dataTransfernone以外的值。

4.拖拽图片时,鼠标旁边没有出现图片。

要在dragstart事件中,设置dataTransfer为图片类型才会显示一张图片。如果拖拽的不是图片,但是希望拖拽时有拖拽元素的图片效果显示,也可以设置dataTransfer为图片,设置要显示的图片效果,然后再设置其他的数据。dataTransfer.setData()方法是可以设置多个类型的数据的。

         这样拖放功能的实现基本就完善了。最后在开始拖拽和放置的时候,可能会给拖拽元素和放置区域设置一些高亮的css效果,整个拖放功能的体验就会很流畅。

 


参考:

draggable属性:draggable - HTML(超文本标记语言) | MDN (mozilla.org)

拖放API:HTML 拖放 API - Web API | MDN (mozilla.org)

DataTransfer:DataTransfer - Web API | MDN (mozilla.org)

热门相关:首席的亿万老婆   遥望行止   国民女神:重生王牌千金   不负荣光,不负你   傅爷怀里的假千金真绝了