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

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

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

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

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

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

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

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

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

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

第二步，既然“她"是react.js的組件, 按照習慣，簡單的將輸入屬性定為為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)
瀏覽路徑：http://jinyejixie.com/article34/djsppe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、移動網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、云服務器、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)