摘要：如其他屬性及方法，詳細(xì)可以查看跨終端能力跨終端能力是最大的特點(diǎn)。在指定區(qū)域的事件中，通過(guò)對(duì)象的屬性，即可獲得文件列表信息，如打印文件名在中實(shí)踐在項(xiàng)目中使用，依然遵循數(shù)據(jù)驅(qū)動(dòng)的原則，即事件數(shù)據(jù)更新。同時(shí)，在事件中執(zhí)行判斷。

最近有個(gè)需求，需要產(chǎn)品導(dǎo)航欄支持拖放。
雖然開(kāi)源社區(qū)已有不少成熟的拖放庫(kù)，但考慮到代碼可控性和可定制性，還是自己寫(xiě)吧。

關(guān)于選型，前端實(shí)現(xiàn)拖放功能，無(wú)外乎幾種：
1、通過(guò)樣式布局+鼠標(biāo)事件，采用此方案的插件如：@shopify/draggable
2、Canvas繪制，插件如：konva
3、Drag&Drop接口，插件如：dragula

經(jīng)過(guò)一番研究，最終選擇了原生Drag&Drop的方案，原因如下：
1、原生拖放事件，順應(yīng)JS語(yǔ)言發(fā)展趨勢(shì)；
2、兼容性符合項(xiàng)目要求；
3、在Can I use...中有如下描述：

事件

一個(gè)拖放行為，自然牽涉到兩部分元素，即拖動(dòng)元素和釋放區(qū)域元素。
與之相關(guān)的事件總共有8個(gè)，其中綁定在拖動(dòng)元素的事件有三個(gè)：drag、dragstart、dragend；
剩下5個(gè)事件綁定在釋放區(qū)域元素上：dragenter、dragover、dragleave、dragexit、drop。
具體定義可以參考mdn

瀏覽器中，有三種元素，默認(rèn)是可以被拖動(dòng)的，它們是：
1、被選中后的文本；
2、圖片；
3、鏈接
其他元素要轉(zhuǎn)成可拖動(dòng)元素，必須添加draggable="true"，如：

"true">div>

注意：這里不能略寫(xiě)，如寫(xiě)成：

div>

是無(wú)效的。

要使一塊元素可被釋放，首先需要綁定dragenter或dragover事件，然后阻止事件，如下：

"return false">
<div ondragover="event.preventDefault()">

因?yàn)椋@兩個(gè)事件的默認(rèn)行為就是“不觸發(fā)”drop事件，所以要定義成可被釋放區(qū)域，就反其道而行之即可。

一個(gè)完整的拖放操作，除了拖動(dòng)一個(gè)元素，在指定區(qū)域釋放之外，還有最重要的一步，就是將元素?cái)y帶的信息在被釋放區(qū)域中展示。
比如，拖放一張圖片，本質(zhì)上就是獲取到被拖動(dòng)的圖片src屬性值，并在釋放時(shí)，在釋放區(qū)域展示一張相同src的圖片。
而這個(gè)信息，就存儲(chǔ)在DataTransfer對(duì)象中。
對(duì)于非默認(rèn)可拖放元素來(lái)說(shuō)，其包含的信息需要在dragstart事件中設(shè)置，使用DataTransfer.setData()，如：

dragItem.ondragstart = e => {
  e.dataTransfer.setData("text/plain", "drag info");
}

如果希望拖動(dòng)時(shí)，展示自定義的圖片，還可以調(diào)用dataTransfer.setDragImage，如：

dragItem1.ondragstart = e => {
  const img = new Image(); 
  img.src = "img_url.jpg"; 
  e.dataTransfer.setDragImage(img, 0, 0);
}

在drop事件中，可以取得拖放元素的信息，并將指定信息通過(guò)dom操作，展示在特定區(qū)域，如：

dropArea.ondrop = e => {
  e.preventDefault();
  const data = event.dataTransfer.getData("text/plain");
  const div = document.createElement("div");
  div.textContent = data;
  e.target.appendChild(div);
}

在DataTransfer對(duì)象還有一對(duì)屬性，用來(lái)確保釋放區(qū)域只能釋放特定類(lèi)型的拖拽元素，即dropEffect和effectAllowed。
effectAllowed只能在dragstart事件中設(shè)置，在dragenter或dragover事件中，需要設(shè)置dropEffect的值與effectAllowed一致，才能觸發(fā)drop事件。如：

dragItem.ondragstart = e => {
  e.dataTransfer.effectAllowed = "move";
}

dropArea.ondragover = e => {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
}

其他屬性及方法，詳細(xì)可以查看mdn

跨終端能力是drag&drop最大的特點(diǎn)。
最常見(jiàn)的跨終端需求，就是從用戶的本地拖放文件到瀏覽器中指定區(qū)域?qū)崿F(xiàn)上傳功能。
在指定區(qū)域的drop事件中，通過(guò)DataTransfer對(duì)象的files屬性，即可獲得文件列表信息，如：

dropArea.ondrop = e => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  if (files.length) {
    Array.prototype.forEach.call(files, f => {
      console.log(f.name); //打印文件名
    });
  }
}

在React項(xiàng)目中使用drag&drop，依然遵循React數(shù)據(jù)驅(qū)動(dòng)的原則，即事件->數(shù)據(jù)->DOM更新。
所以，像之前提到的，通過(guò)DataTransfer對(duì)象傳遞數(shù)據(jù)的方式，在React項(xiàng)目中，可以改為操作組件對(duì)象屬性，保證數(shù)據(jù)流的清晰。
但除此之外，在實(shí)際實(shí)踐中，還是遇到了一些問(wèn)題，需要特殊處理。具體如下：

起初，為保證數(shù)據(jù)流清晰，在React組件中，綁定onDragStart，僅負(fù)責(zé)監(jiān)聽(tīng)事件，數(shù)據(jù)的變動(dòng)和傳遞全部修改組件屬性，但是會(huì)遇到Firefox瀏覽器無(wú)法拖放的兼容問(wèn)題。經(jīng)查發(fā)現(xiàn)，在Firefox中，可拖放元素必須滿足：
1、添加draggable="true"；
2、綁定事件dragstart；
3、在dragstart中，dataTransfer.setData設(shè)置數(shù)據(jù)
所以，即使e.dataTransfer.setData("text", "");設(shè)置空字符串，也必須添加上這一條。

drop&drag跨終端能力有時(shí)也會(huì)成為干擾。在項(xiàng)目中，會(huì)發(fā)現(xiàn)，如果沒(méi)有做判斷，同一個(gè)頁(yè)面同時(shí)打開(kāi)兩個(gè)瀏覽器tab，其拖放元素可以跨tab拖動(dòng)，可能會(huì)造成意外BUG。為此，需要增加判斷。
一種方式，在組件實(shí)例構(gòu)建時(shí)，生成一個(gè)隨機(jī)字符，借助dataTransfer.setData，為拖放元素打上標(biāo)記。同時(shí)，在drop事件中執(zhí)行判斷。
當(dāng)然，如果拖放元素和釋放區(qū)域分屬不同組件，則需要在他們的父組件中，生成隨機(jī)字符，以props形式，傳遞到兩個(gè)子組件。

在上述提到的為拖放元素打標(biāo)簽中，起初采用的是這樣的寫(xiě)法：

e.dataTransfer.setData("text", uniqDataTransferTag);

結(jié)果在Firefox中，每次drop事件觸發(fā)時(shí)，瀏覽器會(huì)自動(dòng)打開(kāi)新tab并搜索uniqDataTransferTag（隨機(jī)字符）。
根據(jù)官方解釋?zhuān)枰?b>drop事件中調(diào)用e.preventDefault()，同時(shí)阻止冒泡e.stopPropagation()，但經(jīng)過(guò)嘗試，依然不生效。初步判斷，可能與React的SyntheticEvent機(jī)制有關(guān)。于是只好曲線救國(guó)，改為設(shè)置自定義的MIME type，如：

e.dataTransfer.setData("ucloud_drag_tag", uniqDataTransferTag);

在項(xiàng)目中，需要在onDragOver中，判斷被拖放元素當(dāng)前位置，并執(zhí)行DOM操作。
根據(jù)定義，dragover事件會(huì)在被拖放元素拖到釋放區(qū)域上時(shí)，每幾百毫秒觸發(fā)一次，顯然不做任何處理會(huì)非常影響性能。這里，自然想到采用節(jié)流throttle方式優(yōu)化。
由于節(jié)流是異步操作，而根據(jù)React的SyntheticEvent，event對(duì)象會(huì)在當(dāng)前事件循環(huán)結(jié)束后移除，除非調(diào)用e.persist()，才能在異步操作中訪問(wèn)到。

根據(jù)設(shè)計(jì)師要求，項(xiàng)目中希望實(shí)現(xiàn)元素拖動(dòng)開(kāi)始后要被拖走，如下圖：

transform: translateX(-9999px);

2、對(duì)被拖放元素添加樣式：

transition: transform 0.1s;

3。在拖動(dòng)開(kāi)始后，添加上述第一步的css class。

根據(jù)交互設(shè)計(jì)，需要實(shí)現(xiàn)長(zhǎng)按元素一定時(shí)長(zhǎng)后才可以觸發(fā)拖拽。
起初，采用的方案是，綁定鼠標(biāo)事件mousedown，觸發(fā)setTimeout，達(dá)到固定時(shí)長(zhǎng)后觸發(fā)state更新，改變拖放元素的draggable值。但實(shí)際測(cè)試中發(fā)現(xiàn)，這種方法存在一定的失敗率，即明明已經(jīng)達(dá)到了長(zhǎng)按的時(shí)長(zhǎng)，依然不能拖放。而且，在Firefox中這個(gè)問(wèn)題更加明顯。
推測(cè)，可能是draggable的更新偶爾會(huì)晚于dragstart事件，導(dǎo)致拖放失敗。
于是轉(zhuǎn)變思路，增設(shè)組件的屬性作為判斷標(biāo)志，在mousedown事件中更新判斷標(biāo)志，而draggable始終設(shè)為true。如下：

// mousedown事件處理函數(shù)
handleLongPress = e => {
    this.resetDragTimer(); // 清除定時(shí)器

    return (this.triggerDragTimer = setTimeout(() => {
      this.isMenuDraggable = true; // 判斷標(biāo)志
    }, this.triggerDragInterval));
};

// dragstart事件處理函數(shù)
handleDragStart = e => {
    if (!this.isMenuDraggable) {
        e.preventDefault();
    } else {
      ...
    }
};

Drag&Drop作為原生拖放API，可以用最少代碼實(shí)現(xiàn)拖放，看似“簡(jiǎn)單”，實(shí)際并非如此。在實(shí)踐中，還是需要對(duì)官方接口定義，以及各瀏覽器差異有足夠了解，才能避免各種未知錯(cuò)誤。而在React這類(lèi)數(shù)據(jù)驅(qū)動(dòng)的框架中運(yùn)用時(shí)，如何處理事件監(jiān)聽(tīng)，同時(shí)又不打亂組件的數(shù)據(jù)流，還是需要好好設(shè)計(jì)一番。