欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react-dnd實現(xiàn)任意拖動與互換位置

 更新時間:2022年08月26日 15:36:22   作者:孤風隨雨  
這篇文章主要為大家詳細介紹了react-dnd實現(xiàn)任意拖動與互換位置,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了react-dnd實現(xiàn)任意拖動與互換位置的具體代碼,供大家參考,具體內(nèi)容如下

react-dnd用法

hooks組件

1.使用DndProvider定義一個可以拖拽的范圍

import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';

class App extends Component{
? render () {
? ? return (
? ? ? <div>
? ? ? ? <DndProvider backend={HTML5Backend}>
? ? ? ? ? <Container />
? ? ? ? </DndProvider>
? ? ? </div>
? ? )
? }
}

2.定義drag和drop

drag:就是可以被拖拽的東西

drop: 就是拖拽后可以放的地方

import { useDrag } from 'react-dnd';

/**item:必填。描述了要拖動的數(shù)據(jù) ( 包含type: 對應drop>accept )
begin(monitor): 可選的。拖動操作開始時觸發(fā)。
end(item, monitor): 可選的。當拖動停止時,end被調(diào)用。
canDrag(monitor): 可選的。使用它來指定當前是否允許拖動。
isDragging(monitor): 可選的。默認情況下,只有啟動拖動操作的拖動源才被視為拖動。
collect: 可選的。收集功能。它應該返回道具的簡單對象以返回注入到組件中。它接收兩個參數(shù),monitor和props。
spec:必填。一個普通的JavaScript對象,上面有一些允許的方法。它描述了拖動源如何對拖放事件做出反應。**/


const Drag = ({ name }) => {
? const [{isDragging}, drag] = useDrag({
? ? type: 'test',
? ? end(item, monitor) { ??
? ? ?? ?monitor.getDropResult() ? //獲取拖拽對象所處容器的數(shù)據(jù)
? ? ?? ?monitor.didDrop() ? ?// 當前容器能否放置拖拽對象
? ? } ? ?
? })

? return (
? ? <div id="drag">{name}</div>
? )
}
import { useDrop } from 'react-dnd';

/**
參考api?
accept:必填。 (對應 drag item.type )
options: 可選的。一個普通的對象。
drop(item, monitor): 可選的。當兼容項目放在目標上時調(diào)用。
hover(item, monitor): 可選的。將項目懸停在組件上時調(diào)用。
canDrop(item, monitor): 可選的。使用它來指定放置目標是否能夠接受該物品。如果要始終允許它,則只需忽略此方法。
collect: 可選的。收集功能。它應該返回道具的簡單對象以返回注入到組件中。它接收兩個參數(shù),monitor和props
*/

const Container = (props) => {
? const [{isOver, canDrop}, drop] = useDrop({
? ? accept: 'test',
? ? drop: (item, monitor) => ({?
? ? ?? ?dropname: '測試',?
? ? ?? ?top: monitor.getDifferenceFromInitialOffset().y,
? ? ? ? left: monitor.getDifferenceFromInitialOffset().x?
? ? ?}), ?
? ? // 可以在這里配置數(shù)據(jù),與drag中monitor.getDropResult()獲取的信息關(guān)聯(lián)
? ? collect: (monitor) => ({
? ? ? isOver: monitor.isOver(), ? // 返回拖拽對象是否懸浮在該容器上
? ? ? canDrop: monitor.canDrop(), ?// 當前容器是否支持拖拽對象放置
? ? })
? })

? return (
? ? <div ref={drop}>
?? ??? ?...
? ? </div>
? )
}

實現(xiàn)任意拖拽

1.在容器中通過drop —> monitor.getDifferenceFromInitialOffset()獲取拖拽對象當前位置與初始位置的偏移量

2.在drag的end中,通過monitor.getDropResult()獲取到與初始位置的偏移量,給當前拖拽元素的偏移量重新賦值,即可做到任意拖拽

3.如果同時有很多個可拖拽的對象,需要給他們定義一個index值, 因為這個可拖拽組件是復用的,所以我們獲取到的拖拽對象是個數(shù)組,我們可以用index作為下標,給當前拖拽組件單獨賦值

const Drag = ({ name, top, left, index }) => {
? const [{isDragging}, drag] = useDrag({
? ? type: 'test',
? ? end(item, monitor) {
? ? ? console.log(item);
? ? ? if(monitor.didDrop()){
? ? ? ? const droptarget = monitor.getDropResult();
? ? ? ? const top = document.querySelectorAll('#drag')[index].offsetTop;
? ? ? ? const left = document.querySelectorAll('#drag')[index].offsetLeft;
? ? ? ? document.querySelectorAll('#drag')[index].style.top = (top + droptarget.top) + 'px';
? ? ? ? document.querySelectorAll('#drag')[index].style.left = (left + droptarget.left) + 'px';
? ? ? }else{
? ? ? ? console.log(monitor.getDropResult());
? ? ? }
? ? }
? })

? return (
? ? <div id="drag" index={index} ref={drag} style={{position: 'absolute', top: `${top}`, left: `${left}`, width: '70px', height: '40px', border: '1px solid black'}}>{name}</div>
? )
}
const Container = (props) => {
? const [{isOver, canDrop}, drop] = useDrop({
? ? accept: 'test',
? ? drop: (item, monitor) => ({ dropname: '測試', top: monitor.getDifferenceFromInitialOffset().y, left: monitor.getDifferenceFromInitialOffset().x }),
? ? collect: (monitor) => ({
? ? ? isOver: monitor.isOver(),
? ? ? canDrop: monitor.canDrop(),
? ? })
? })

? return (
? ? <div
? ? ? id="drop1"
? ? ? ref={drop}
? ? ? style={{width: '700px', height: '600px', backgroundColor: 'yellow'}}
? ? >

? ? </div>
? )
}

拖拽互換位置

拖拽互換位置需要組件既是drag拖拽對象,也是drop拖拽容器。所以使用useRef()定義ref,然后 drag(drop(ref)),讓它即作為拖拽對象也作為拖拽容器,然后定義拖拽結(jié)束事件

import React, { useRef, useMemo } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { item } from './itemType';

const style = {
? display: 'inline',
? border: '1px dashed gray',
? padding: '0.5rem 1rem',
? marginRight: '30px',
? marginTop: '.5rem',
? backgroundColor: 'blue',
? cursor: 'move',
? borderRadius: '50%',
? position: 'relative',
};

const Drag = (props) => {
? const ref = useRef()

? const [{}, drop] = useDrop({
? ? accept: item.type,
? ? drop: (item, monitor) => {
? ? ? ? return {
? ? ? ? ? index: props.index
? ? ? ? }
? ? }
? })

? const count = useMemo(() => {
? ? document.getElementById('delete').oncontextmenu = (e) => {
? ? ? e.preventDefault();
? ? }
? },[1])

? const [{}, drag] = useDrag({
? ? type: item.type,
? ? end: (item, monitor) => {
? ? ? console.log(monitor.didDrop());
? ? ? if(monitor.didDrop()){
? ? ? ? const dropResult = monitor.getDropResult();
? ? ? ? props.changePosition([props.index, dropResult.index])
? ? ? }else{
? ? ? ? return;
? ? ? }
? ? }
? })

? drag(drop(ref))

? return (
? ? <div id="delete" ref={ref} id="drag" index={props.index} style={{...style}} >
? ? ? <span>{props.name}</span>
? ? ? <span style={{position: 'absolute', border: '1px solid gray', top: "18.5px", left: '145px', width: '29px',background: 'gray'}}></span>
? ? </div>
? )
}

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • react-native 封裝選擇彈出框示例(試用ios&android)

    react-native 封裝選擇彈出框示例(試用ios&android)

    本篇文章主要介紹了react-native 封裝選擇彈出框示例(試用ios&android),具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • 使用React實現(xiàn)一個簡單的待辦事項列表的示例代碼

    使用React實現(xiàn)一個簡單的待辦事項列表的示例代碼

    這篇文章我們將詳細講解如何建立一個這樣簡單的列表,文章通過代碼示例介紹的非常詳細,對我們的學習或工作有一定的幫助,需要的朋友可以參考下
    2023-08-08
  • React?中?memo?useMemo?useCallback?到底該怎么用

    React?中?memo?useMemo?useCallback?到底該怎么用

    在React函數(shù)組件中,當組件中的props發(fā)生變化時,默認情況下整個組件都會重新渲染。換句話說,如果組件中的任何值更新,整個組件將重新渲染,包括沒有更改values/props的函數(shù)/組件。在react中,我們可以通過memo,useMemo以及useCallback來防止子組件的rerender
    2022-10-10
  • react高階組件經(jīng)典應用之權(quán)限控制詳解

    react高階組件經(jīng)典應用之權(quán)限控制詳解

    在React中,高階組件是重用組件邏輯的一項高級技術(shù)。下面這篇文章主要給大家介紹了關(guān)于react高階組件經(jīng)典應用之權(quán)限控制的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。
    2017-09-09
  • 基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼

    基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼

    這篇文章主要介紹了基于react hooks,zarm組件庫配置開發(fā)h5表單頁面,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-04-04
  • React+Webpack快速上手指南(小結(jié))

    React+Webpack快速上手指南(小結(jié))

    這篇文章主要介紹了React+Webpack快速上手指南(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 詳解react使用react-bootstrap當輪子造車

    詳解react使用react-bootstrap當輪子造車

    本篇文章主要介紹了詳解react使用react-bootstrap當輪子造車,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-08-08
  • React項目如何使用Element的方法步驟

    React項目如何使用Element的方法步驟

    本文主要介紹了React項目如何使用Element的方法步驟,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • 淺談react 同構(gòu)之樣式直出

    淺談react 同構(gòu)之樣式直出

    這篇文章主要介紹了淺談react 同構(gòu)之樣式直出,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • react項目打包后點擊index.html頁面出現(xiàn)空白的問題

    react項目打包后點擊index.html頁面出現(xiàn)空白的問題

    這篇文章主要介紹了react項目打包后點擊index.html頁面出現(xiàn)空白的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06

最新評論