這篇文章主要為大家展示了React.js組件怎么實現(xiàn)拖拽排序組件功能，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

定制網(wǎng)站建設(shè)可以根據(jù)自己的需求進(jìn)行定制，網(wǎng)站制作、成都網(wǎng)站設(shè)計構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司網(wǎng)站制作、成都網(wǎng)站設(shè)計的運用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義

因為使用了react.js技術(shù)棧，所以封裝優(yōu)先考慮輸入和輸出?；跀?shù)據(jù)驅(qū)動去渲染頁面、控制拖拽元素的順序。

由于我不考慮兼容IE8等舊版本瀏覽器，拖拽的效果采用了HTML5的拖放（Drag 和 drop）。當(dāng)然，如果要求兼容性豐富，使用鼠標(biāo)點擊的相關(guān)事件也很簡單。

實現(xiàn)的效果如下：

第一步是先了解H5拖放的相關(guān)屬性，MDN上有詳細(xì)的說明，鏈接

有一點需要注意的是，react.js會給所有的屬性事件名稱前加上"on",后面則為駝峰式寫法。例如原生的click事件，在react.js里應(yīng)使用onClick事件。

我的組件使用的拖放屬性如下：

• draggable 當(dāng)設(shè)置為true時，當(dāng)前控件可以拖拽
• onDragStart 控件開始被拖拽時觸發(fā)的事件，它提供一個dataTransfer.setData()方法，將必要的數(shù)據(jù)存儲在對象中便于在其它方法中調(diào)用
• onDragOver 規(guī)定當(dāng)前控件可以接收拖拽的組件的方法，一般在此方法中阻止冒泡
• onDragEnter 拖動后鼠標(biāo)進(jìn)入另一個可接受區(qū)域時觸發(fā)，通過它可以實現(xiàn)移入效果
• onDragLeave a拖到b，離開b的時候觸發(fā)，可以用于監(jiān)聽消除移入效果的時機(jī)
• onDrop 當(dāng)控件被“釋放”到一個有效的釋放目標(biāo)位置時觸發(fā)，我在這個方法中處理數(shù)據(jù)，并通過它調(diào)用onChange方法，將value值暴露給父組件
   

其中draggable，onDragStart是被“拖拽”方需要設(shè)置的屬性，onDragOver，onDragEnter，onDragLeave和onDrop是被“拖入”方需要設(shè)置的屬性。不過對于我的拖拽排序組件，每一個元素都是拖拽和拖入方

第二步，既然“她"是react.js的組件, 按照習(xí)慣，簡單的將輸入屬性定為為value，同時，暴露onChange事件監(jiān)聽value的變化，并將其暴露給父組件，同時，暴露一個屬性sortKey告訴組件使用哪個key作為排序字段。
既然涉及到排序，同時允許指定組件每個元素的內(nèi)部子組件，我將輸入數(shù)據(jù)格式定義為一個數(shù)組對象，其中content可以為reactNode：

 value: [
    {
     content: 'div1',
     code: '01',
     sort: 0,
    },
    {
     content: 'div2',
     code: '02',
     sort: 1
    },
    {
     content: 'div3',
     code: '03',
     sort: 2
    },
    {
     content: 'div5',
     code: '05',
     sort: 5
    },
    {
     content: 'div4',
     code: '04',
     sort: 4
    }]

本文名稱：React.js組件怎么實現(xiàn)拖拽排序組件功能-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://weahome.cn/article/djsppe.html