因專案中有拖拽功能需求，於是乎在github上找到了react-beautiful-dnd這個react列表拖拽庫幫助我們實現甬道間拖拽，下面介紹一下react-beautiful-dnd基本的幾個api和實現方法。
dragdropcontext
拖拽上下文。可拖拽的內容需包裹在dragdropcontext中，dragdropcontext不支援巢狀。
props
type hooks = from 'react-beautiful-dnd';
ondragstart = () =>
ondragupdate=
ondragend=
hello world
droppable
droppable為放置拖拽元素的甬道,< draggable/>必須包裹在中。
props
import type from 'react';
type props =
tips: 在虛擬列表中我們不需要加入placeholder佔位符，因為虛擬列表中我們不是基於可視項的集合大小來確定列表的尺寸，而是根據itemcount來計算的。(height = itemsize*itemcount)。對於虛擬列表，將我們自己的節點插入其中不會增加列表的大小。
draggable
draggable 為可拖拽的塊，必須放在裡。
props
import type from 'react';
type props = , (v, k) => k).map(k => (`,
content: `item-$`
const grid = 8;
const getitemstyle = (isdragging, draggablestyle) => (px 0`,
// change background color if dragging
background: isdragging ? "lightgreen" : "grey",
...draggablestyle
const getliststyle = isdraggingover => (
ref=
style=
style=
拖拽圖示
拖拽圖示
virtual模式
當資料量足夠大的時候，相應地渲染出來的dom也會足夠的多, react-virtualized便是乙個react長列表解決方案。
[email protected]版本也增加了對虛擬列表的支援。
虛擬列表原理
虛擬列表通過判斷並只載入當前視窗內的列表元素來解決海量資料列表。
首先要把的mode屬性設為virtual(參考上文droppable的props)，告訴dragdropcontext當前甬道為虛擬列表模式。
使用的rendercloneapi 。在虛擬列表模式下，拖動時原始會被刪除，然後用renderclone轉殖個新的放到容器元素中。
renderclone用法：
function list(props)
ref=
item id:
ref=
item id:
或const getrenderitem = (items) => (provided, snapshot, rubric) => (
ref=
item id:
function list(props)
tips: 在使用react-virtualized時，稍不注意會出現滾動出第一屏後頁面閃爍的問題。
react-virtualized使用注意事項
拖動的原理——陣列的重排
ondragend
該鉤子是拖拽過程中最重要的乙個函式，也是必需的，該函式必須導致列表資料的重新排序。它也提供來有關拖動的所有資訊。
result:dropresult
type dropresult = {|
...dragupdate,
reason: dropreason,
type dropreason = 'drop' | 'cancel';
result.draggableid: 拖動的draggable的draggableid
result.type: 拖動的draggable的型別(type)，droppable上設定的type值
result.source: draggable的起始位置(包含起始位置的index索引和droppableid)
result.destination: draggable完成的位置，如果使用者在超過的情況下掉落，則目標將為null(如果不為null，則包含結束位置的index索引和droppableid)
result.reason: 下降的原因
你需要做的
如果result.destination為null，直接return;
如果source.droppableid和destination.droppableid相等，則需要從列表中刪除該專案並放置到正確的位置；
如果source.droppableid和destination.droppableid不相等，則需要source.droppableid列表中刪除該專案並放置到destination.droppableid正確的位置；
附上我的demo**庫，有興趣的可以看看。demo**庫
聯結器與接外掛程式
什麼是聯結器 聯結器是我們電子工程技術人員經常接觸的一種部件。它的作用非常單純 在電路內被阻斷處或孤立不通的電路之間，架起溝通的橋梁，從而使電流流通，使電路實現預定的功能。聯結器是電子裝置中不可缺少的部件，順著電流流通的通路觀察，你總會發現有乙個或多個聯結器 聯結器形式和結構是千變萬化的，隨著應用物...
vue連線 外掛程式 vue常用外掛程式及安裝
1.npm install echarts s echarts 前端圖表 使用 import echarts from echarts vue.prototype.echarts echarts vue.use echarts 2.npm install highcharts s highchart...
使用接外掛程式需要注意的問題
任何乙個電子專案，幾乎都要或多或少使用一些接外掛程式，最簡單的就是排針排座了。別小看接外掛程式，接外掛程式的使用不當，將使產品完全無法使用。這裡根據自己的經驗總結一些接外掛程式的使用注意事項，在需要時備查 1.結構尺寸 產品可能存在一定的大小限制，在一鈕扣感測器上使用2.54間距的插針就貽笑大方了 ...