ant design實(shí)現(xiàn)圈選功能
Ant Design是一款十分出色的的UI設(shè)計(jì)組件，Ant Design電腦版界面美觀大方，功能強(qiáng)勁實(shí)用，軟件包含整套開(kāi)發(fā)和設(shè)計(jì)資源和工具，豐富的React UI組件，能夠?yàn)榍岸薝I設(shè)計(jì)提供了新的解決方案，非常的方便實(shí)用哦
由于同事離職，公司缺人，他的工作便交接到我的手里了，我一個(gè)android開(kāi)發(fā)者，以前也從來(lái)沒(méi)做過(guò)web端開(kāi)發(fā)啊，沒(méi)辦法，領(lǐng)導(dǎo)交代的任務(wù)硬著頭皮也得接下來(lái)啊！拿到手上，做的第一個(gè)功能，便是存儲(chǔ)計(jì)劃，需要實(shí)現(xiàn)可按照天、周、月存儲(chǔ)，并且以鼠標(biāo)圈選的形式實(shí)現(xiàn)，接下來(lái)附上自己的實(shí)現(xiàn)效果圖：
實(shí)現(xiàn)流程
本來(lái)拿到這個(gè)任務(wù)的時(shí)候，自己是想用Grid實(shí)現(xiàn)的，但是看到官網(wǎng)上面的一句話，直接打消了我的念頭，官網(wǎng)是這么說(shuō)的：
也就是說(shuō)用Grid每一行最多顯示24個(gè)單元格，這個(gè)完全達(dá)不到我的要求，因?yàn)槲颐啃行枰@示25個(gè)單元格（每行的title+24小時(shí)），我決定還是自己用div畫吧。
1.先畫單元格
畫單元格分成第一行和剩余的行兩種：
第一行組件我們定義為ColumsTitle：
循環(huán)里面的每一個(gè)div其實(shí)代表的是每一個(gè)單元格。
//標(biāo)題列組件
const ColumsTitle = () => {
const colums = [];
for (let i = 0; i < 25; i++) {
if (i == 0) {
colums.push(<div key={i} className={styles["columns-title-border"]}></div>);
} else {
colums.push(<div key={i} className={styles["columns-border-none"]}>{i - 1}</div>);
}
}
return colums;
}
剩余行組件，我們定義為Colums:
//列組件
class Colums extends PureComponent {
render() {
const colums = [];
for (let i = 0; i < 25; i++) {
if (i == 0) {
colums.push(<div key={i} className={styles["columns-title-border"]}>{this.props.rowName}</div>);
} else {
colums.push(<div id={this.props.rowName + i} key={this.props.rowName + i} className={styles["columns-border"]} name="chooseDiv"></div>);
}
}
return colums;
}
}
最后一個(gè)就是整體上的組件了，我們叫做Rows：
// 行組件
const Rows = (props) => {
const rows = [];
var rowLength = 1;
var rowName = "";
if (props.saveType == "1") {
rowLength = 2;
} else if (props.saveType == "2") {
rowLength = 8;
} else if (props.saveType == "3") {
rowLength = 32;
}
for (let i = 0; i < rowLength; i++) {
rowName = formatRowName(props, i);
if (i == 0) {
rows.push(<Row key={i}>
<div className={styles["columns-title-out-margin"]}><ColumsTitle/></div>
</Row>);
} else {
rows.push(<Row key={i}>
<div className={styles["columns-title-out"]}><Colums saveType={props.saveType} rowName={rowName}/>
</div>
</Row>);
}
}
return rows;
};
我們渲染到SavePlan這個(gè)組件里面：
export default class SavePlan extends PureComponent {
constructor(props) {
super(props);
this.state = {
saveType: "1"http://1 按天存儲(chǔ) 2 按周存儲(chǔ) 3 按月存儲(chǔ)
}
}
handleRadioChange = e => {
this.setState({saveType: e.target.value});
};
onChange(value) {
console.log('changed', value);
}
render() {
return (
<PageHeaderWrapper>
<div>
<h1>存儲(chǔ)計(jì)劃</h1>
<div className={styles["title-row"]}>
<Radio.Group defaultValue="1" size="large" onChange={this.handleRadioChange}>
<Radio.Button value="1">天存儲(chǔ)</Radio.Button>
<Radio.Button value="2">周存儲(chǔ)</Radio.Button>
<Radio.Button value="3">月存儲(chǔ)</Radio.Button>
</Radio.Group>
<div className={styles["right-div"]}>
存儲(chǔ)周期：<InputNumber min={1} max={10} defaultValue={3} onChange={this.onChange}/>（天）
<div className={styles["title-row"]}>
<Button type="primary" className={styles.btn}>確定</Button>
<Button className={styles.btn}>取消</Button>
</div>
</div>
</div>
<Rows saveType={this.state.saveType}>
</Rows>
</div>
</PageHeaderWrapper>
);
}
}
到這一步，我們?cè)陧?yè)面其實(shí)已經(jīng)可以看到整個(gè)布局了，但是還沒(méi)有添加鼠標(biāo)事件，還沒(méi)有圈選功能，接下來(lái)我們看鼠標(biāo)事件。
2.鼠標(biāo)事件
我們這里主要用到了鼠標(biāo)的三個(gè)事件：onmousedown、onmousemove、onmouseup。
我們首先設(shè)定可選的單元格，標(biāo)題設(shè)定為不可選：
-webkit-user-select: none; /* 禁止 DIV 中的文本被鼠標(biāo)選中 */
-moz-user-select: none; /* 禁止 DIV 中的文本被鼠標(biāo)選中 */
-ms-user-select: none; /* 禁止 DIV 中的文本被鼠標(biāo)選中 */
user-select: none; /* 禁止 DIV 中的文本被鼠標(biāo)選中 */
思路就是：獲取鼠標(biāo)按下時(shí)的坐標(biāo)，并判斷是否在可選區(qū)域內(nèi)，若在那么就添加一個(gè)div（也就是我們的圈選框），圖解如下：
獲取可選單元格數(shù)組
//可選單元格
var fileNodes = document.getElementsByName("chooseDiv");
獲取鼠標(biāo)點(diǎn)擊位置的坐標(biāo)
var evt = window.event||arguments[0]; //加上滾動(dòng)距離 var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var startX =evt.pageX || evt.clientX + scrollX; var startY =evt.pageY || evt.clientY + scrollY;
判斷可選框坐標(biāo)范圍
//判斷鼠標(biāo)點(diǎn)擊的點(diǎn)是否在可選框內(nèi)部，主要是判斷第一個(gè)可選框的左上角坐標(biāo)和最后一個(gè)圈選框的右下角坐標(biāo) if ((startX >= firstDivOffsetLeft && startY >= firstDivOffsetTop) && (startX <= lastDivOffsetLeft && startY <= lastDivOffsetTop))
判斷鼠標(biāo)點(diǎn)擊在哪一個(gè)單元格里面,并獲取該單元格左上角坐標(biāo)
//判斷鼠標(biāo)點(diǎn)擊的點(diǎn)在哪一個(gè)div里面，然后更改圈選框的左上角坐標(biāo)為該div的左上角坐標(biāo)
for (var i = 0; i < fileNodes.length; i++) {
if ((startX >= getOffsetLeft(fileNodes[i]) && startX <= getOffsetLeft(fileNodes[i]) + fileNodes[i].offsetWidth) && (startY >= getOffsetTop(fileNodes[i]) && startY <= getOffsetTop(fileNodes[i]) + fileNodes[i].offsetHeight)) {
console.log("在內(nèi)部");
startX = getOffsetLeft(fileNodes[i]);
startY = getOffsetTop(fileNodes[i]);
break;
} else {
console.log("不在內(nèi)部");
}
}
創(chuàng)建圈選框，并更改圈選框的左上角坐標(biāo)為該單元格的左上角坐標(biāo)
//創(chuàng)建選擇框
selDiv = document.createElement("div");
selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
selDiv.id = "selectDiv";
document.body.appendChild(selDiv);
selDiv.style.left = startX + "px";
selDiv.style.top = startY + "px";
鼠標(biāo)移動(dòng)過(guò)程中，改變?nèi)x框的寬高；
evt = window.event || arguments[0];
if (isSelect) {
if (selDiv.style.display == "none") {
selDiv.style.display = "";
}
//加上鼠標(biāo)滾動(dòng)距離
var _scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var _scrollY = document.documentElement.scrollTop || document.body.scrollTop;
_x = evt.pageX || evt.clientX + _scrollX;
_y = evt.pageY || evt.clientY + _scrollY;
selDiv.style.left = Math.min(_x, startX) + "px";
selDiv.style.top = Math.min(_y, startY) + "px";
selDiv.style.width = Math.abs(_x - startX) + "px";
selDiv.style.height = Math.abs(_y - startY) + "px";
鼠標(biāo)抬起的時(shí)候，計(jì)算被圈選的單元格并更改樣式；
var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
for (var i = 0; i < selList.length; i++) {
var sl = selList[i].offsetWidth + getOffsetLeft(selList[i]);
var st = selList[i].offsetHeight + getOffsetTop(selList[i]);
if (sl > _l && st > _t && getOffsetLeft(selList[i]) < _l + _w && getOffsetTop(selList[i]) < _t + _h) {
if (selList[i].className.indexOf("seled") == -1) {
selList[i].className = styles["columns-borderseled"];
}
else {
selList[i].className = styles["columns-border"];
}
}
}
其他工具方法
const getOffsetLeft = function (obj) {
var tmp = obj.offsetLeft;
var node = obj.offsetParent;
while (node != null) {
tmp += node.offsetLeft;
node = node.offsetParent;
}
return tmp;
}
const getOffsetTop = function (obj) {
var tmp = obj.offsetTop;
var node = obj.offsetParent;
while (node != null) {
tmp += node.offsetTop;
node = node.offsetParent;
}
return tmp;
}
總結(jié)
以上所述是小編給大家介紹的ant design實(shí)現(xiàn)圈選功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
JavaScript實(shí)現(xiàn)即時(shí)通訊的 4 種方案
這篇文章主要給大家分享了JavaScript實(shí)現(xiàn)即時(shí)通訊的 4 種方案，其實(shí)就是服務(wù)端如何將數(shù)據(jù)推送到瀏覽器，下面詳細(xì)的文章內(nèi)容，需要的小伙伴參考一下，洗碗給對(duì)你有所幫助2022-02-02
JavaScript中立即執(zhí)行函數(shù)實(shí)例詳解
javascript和其他編程語(yǔ)言相比比較隨意，所以javascript代碼中充滿各種奇葩的寫法，有時(shí)霧里看花，當(dāng)然，能理解各型各色的寫法也是對(duì)javascript語(yǔ)言特性更進(jìn)一步的深入理解。這篇文章主要給大家介紹了關(guān)于JavaScript中立即執(zhí)行函數(shù)的相關(guān)資料，需要的朋友可以參考下。2017-11-11
JavaScript實(shí)現(xiàn)彈出式可拖動(dòng)登錄框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)彈出式可拖動(dòng)登錄框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了微信小程序如何獲取用戶頭像和昵稱，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了原生JS京東輪播圖代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫）,現(xiàn)在允許瀏覽器與服務(wù)器通信而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax,下面這篇文章主要給大家介紹了關(guān)于ajax在js中和jQuery中的用法,需要的朋友可以參考下2021-08-08
JavaScript程序設(shè)計(jì)高級(jí)算法之動(dòng)態(tài)規(guī)劃實(shí)例分析
這篇文章主要介紹了JavaScript程序設(shè)計(jì)高級(jí)算法之動(dòng)態(tài)規(guī)劃,結(jié)合實(shí)例形式分析了javascript動(dòng)態(tài)規(guī)劃算法的原理、實(shí)現(xiàn)技巧與相關(guān)使用注意事項(xiàng),需要的朋友可以參考下2017-11-11
詳解如何在 JavaScript 中使用三元運(yùn)算符
這篇文章主要為大家介紹了詳解如何在 JavaScript 中使用三元運(yùn)算符示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
JavaScript-定時(shí)器0~9抽獎(jiǎng)系統(tǒng)詳解（代碼）
這篇文章主要介紹了 JavaScript-定時(shí)器0~9抽獎(jiǎng)系統(tǒng)，通過(guò)代碼實(shí)例說(shuō)明函數(shù)調(diào)用的整體操作，具體步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
微信小程序?qū)崿F(xiàn)下滑到底部自動(dòng)翻頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下滑到底部自動(dòng)翻頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03