本文介紹了React 實(shí)現(xiàn)拖拽功能的示例代碼，分享給大家，具體如下：

創(chuàng)新互聯(lián)公司是專業(yè)的順義網(wǎng)站建設(shè)公司，順義接單;提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行順義網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

實(shí)現(xiàn)效果：

因?yàn)楣ぷ髦袝玫?JIRA 所以想實(shí)現(xiàn)一下相似的功能，順便學(xué)習(xí)一下 H5 的拖拽。不支持拖拽改變順序，感覺有點(diǎn)麻煩，而且沒必要。感覺相關(guān)的博文好少的，大部分都是直接上代碼，沒有解釋。

圖片默認(rèn)可以拖動，其他元素的拖動效果同圖片。正常的 div 是不能被拖動的，鼠標(biāo)點(diǎn)擊選擇后移動沒有效果，需要加  draggable="true" 使得元素可以被拖動。

拖拽相關(guān)的幾個(gè)事件，有被拖動元素的事件，也有拖動進(jìn)入的容器元素的事件。 

被拖拽元素的事件：ondragstart，ondragend 

放置元素的事件：ondragenter、ondragover、ondragleave、ondrop 

顧名思義，不需要解釋。

需要注意是  ondragover 的默認(rèn)事件 Reset the current drag operation to "none". 所以想讓一個(gè)元素可放置，需要重寫 ondragover 

element.ondragover = event => { 
  event.preventDefault();
  // ...
}

當(dāng)一個(gè)元素是可放置的，拖拽經(jīng)過時(shí)鼠標(biāo)會變成加號（cursor: copy;）

有一個(gè)對象  dataTransfer 可以用來存儲拖拽數(shù)據(jù)。

dragEle.ondragstart = e => e.dataTransfer.setData('item', e.target.id);

然后在 ondrop 的時(shí)候 可以獲取到這個(gè)值 （ondragenter、ondragover、ondragleave 獲取不到...）

putEle.ondrop = function(e) {
   let id = e.dataTransfer.getData('item');
   // ...
}

  
  
  
  
  


  

    

      
item1
      
item2
      
item3
    
    

    

    

  
  

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。