react-rnd靠右顯示的實(shí)現(xiàn)方式
更新時(shí)間：2025年05月28日 15:04:32 作者：Hero_rong
這篇文章主要介紹了react-rnd靠右顯示的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
react-rnd靠右顯示
react-rnd是react一個(gè)拖拽的組件
本篇文章是以官方文檔為基礎(chǔ)整理出來(lái)的https://www.npmjs.com/package/react-rnd
首先，這個(gè)控件默認(rèn)是顯示在左上角的，但是我這里的需求是要顯示在右下角，研究了一下它的屬性和方法，所有有了這篇文章
靠右顯示
<Rnd
default={{
x: 40,
y: 40,
width: 200,
height: 200
}}
minWidth:{200}
minHeight:{200}
maxWidth:{200}
maxHeight:{200}
position={{x:x,y:y}}
onDragStop={{(e,d)=>{dragStop(e,d)}}}
></Rnd>屬性 default
- 里面的xy是可拖拽的范圍，并不是初始化的位置
屬性 position
- position就是控件在頁(yè)面上的位置，x、y值只能設(shè)置正數(shù)，不能設(shè)置負(fù)數(shù)，
- 所以想要設(shè)置初始化的時(shí)候顯示位置的話就是在這里哈
方法 onDragStop
- onDragStop方法，是控件拖動(dòng)結(jié)束觸發(fā)的事件，具體的參數(shù)寫(xiě)在圖片上了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React項(xiàng)目中使用Redux的?react-redux
這篇文章主要介紹了React項(xiàng)目中使用Redux的?react-redux，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理
這篇文章主要為大家介紹了react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
react學(xué)習(xí)每天一個(gè)hooks?useWhyDidYouUpdate
這篇文章主要為大家介紹了react學(xué)習(xí)每天一個(gè)hooks?useWhyDidYouUpdate使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
React Hook用法示例詳解（6個(gè)常見(jiàn)hook）
這篇文章主要介紹了React Hook用法詳解（6個(gè)常見(jiàn)hook）,本文通過(guò)實(shí)例代碼給大家介紹了6個(gè)常見(jiàn)hook，需要的朋友可以參考下2021-04-04
本篇文章主要介紹了React組件通信詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
一文詳解React Redux設(shè)計(jì)思想與工作原理
最近看項(xiàng)目中使用了?Redux,?便嘗試了解一波?Redux?的設(shè)計(jì)思想與工作原理,所以本文詳細(xì)的給大家介紹了Redux設(shè)計(jì)思想與工作原理,需要的朋友可以參考下2023-09-09
React簡(jiǎn)便獲取經(jīng)緯度信息的方法詳解
在現(xiàn)代的Web應(yīng)用程序中,獲取用戶的地理位置信息是一項(xiàng)常見(jiàn)的需求,本文我們將介紹如何在React應(yīng)用程序中簡(jiǎn)便地獲取用戶的經(jīng)緯度信息,需要的可以參考下2023-11-11
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。這篇文章主要介紹了ReactJS中的自定義組件的代碼講解,需要的朋友可以參考下2019-11-11
React Native 中實(shí)現(xiàn)確認(rèn)碼組件示例詳解
這篇文章主要為大家介紹了React Native中實(shí)現(xiàn)確認(rèn)碼組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
淺談對(duì)于react-thunk中間件的簡(jiǎn)單理解
這篇文章主要介紹了淺談對(duì)于react-thunk中間件的簡(jiǎn)單理解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05