ant design 링 선택 기능 실현

Ant Design 은 매우 뛰어난 UI 디자인 구성 요소 입 니 다.Ant Design 컴퓨터 판 인터페이스 가 아름 답 고 대범 하 며 기능 이 강하 고 실 용적 입 니 다.소프트웨어 는 전체 개발 과 디자인 자원 과 도 구 를 포함 하고 풍부 한 React UI 구성 요 소 를 포함 하여 전단 UI 디자인 에 새로운 해결 방안 을 제공 할 수 있 고 매우 편리 하고 실 용적 입 니 다.
동료 가 이 직 했 기 때문에 회사 에 사람 이 없어 서 그의 일 은 제 손 에 맡 겼 습 니 다.저 는 안 드 로 이 드 개발 자 입 니 다.예전 에 도 웹 개발 을 한 적 이 없 었 습 니 다.어 쩔 수 없 었 습 니 다.리더 가 맡 긴 임 무 는 억지로 다음 에 해 야 합 니 다!손 에 쥐 고 하 는 첫 번 째 기능 은 바로 저장 계획 이다.하늘,주,달 에 따라 저장 할 수 있 고 마우스 링 으로 선택 한 형식 으로 실현 해 야 한다.그 다음 에 자신의 실현 효과 도 를 첨부 해 야 한다.

실현 절차
원래 이 미 션 을 받 았 을 때 자신 은 Grid 로 이 루 려 고 했 지만 홈 페이지 에 있 는 한 마디 를 보고 제 생각 을 접 었 습 니 다.홈 페이지 에서 이렇게 말 했 습 니 다.
즉,Grid 로 한 줄 에 최대 24 개의 셀 을 표시 하 는 것 입 니 다.이것 은 제 요구 에 전혀 미 치지 못 합 니 다.제 가 줄 마다 25 개의 셀(줄 마다 title+24 시간)을 표시 해 야 하기 때문에 저 는 div 로 그 리 는 것 이 좋 겠 습 니 다.
1.칸 을 먼저 그린다
셀 을 첫 줄 과 나머지 줄 두 가지 로 나 누 기:

첫 번 째 줄 구성 요 소 는 ColumsTitle 로 정의 합 니 다.
순환 안의 모든 div 는 사실 모든 셀 을 대표 합 니 다.

//     
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;
 }
}

마지막 으로 전체적인 구성 요소 입 니 다.저 희 는 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 이 구성 요소 에 렌 더 링 합 니 다:

export default class SavePlan extends PureComponent {
 constructor(props) {
  super(props);
  this.state = {
   saveType: "1"//1      2      3     
  }
 }
 handleRadioChange = e => {
  this.setState({saveType: e.target.value});
 };
 onChange(value) {
  console.log('changed', value);
 }
 render() {
  return (
   <PageHeaderWrapper>
    <div>
     <h1>    </h1>
     <div className={styles["title-row"]}>
      <Radio.Group defaultValue="1" size="large" onChange={this.handleRadioChange}>
       <Radio.Button value="1">   </Radio.Button>
       <Radio.Button value="2">   </Radio.Button>
       <Radio.Button value="3">   </Radio.Button>
      </Radio.Group>
      <div className={styles["right-div"]}>
           ：<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>
  );
 }
}

이 단계 에 이 르 러 우 리 는 페이지 에서 전체 레이아웃 을 볼 수 있 지만 마우스 이벤트 가 추가 되 지 않 았 고 선택 기능 이 없습니다.그 다음 에 마우스 이 벤트 를 보 겠 습 니 다.
2.마우스 이벤트
우 리 는 주로 마우스 의 세 가지 사건 을 사 용 했 습 니 다:onmousedown,onmousemove,onmouseup.
우 리 는 먼저 선택 할 수 있 는 셀 을 설정 합 니 다.제목 은 선택 할 수 없 는 것 으로 설정 합 니 다.
 -webkit-user-select: none; /* DIV 에서 텍스트 선택 금지*/
  -moz-user-select: none; /* DIV 에서 텍스트 선택 금지*/
  -ms-user-select: none; /* DIV 에서 텍스트 선택 금지*/
  user-select: none; /* DIV 에서 텍스트 선택 금지*/
사고방식 은 마우스 가 눌 렀 을 때의 좌 표를 가 져 오고 선택 할 수 있 는 영역 에 있 는 지 판단 하 는 것 이다.만약 에 div(즉 우리 의 동그라미 선택 상자)를 추가 하면 그림 은 다음 과 같다.

선택 가능 한 셀 배열 가 져 오기

 //     
 var fileNodes = document.getElementsByName("chooseDiv");

마우스 클릭 위치의 좌표 가 져 오기

var evt = window.event||arguments[0];
 //      
 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;

선택 가능 한 상자 좌표 범위 판단

//                ，                               
 if ((startX >= firstDivOffsetLeft && startY >= firstDivOffsetTop) && (startX <= lastDivOffsetLeft && startY <= lastDivOffsetTop))

마우스 클릭 이 어느 칸 에 있 는 지 판단 하고 이 칸 의 왼쪽 상단 좌 표를 가 져 옵 니 다.

//            div  ，               div      
  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("   ");
    startX = getOffsetLeft(fileNodes[i]);
    startY = getOffsetTop(fileNodes[i]);
    break;
   } else {
    console.log("    ");
   }
  }

원 선택 상 자 를 만 들 고 원 선택 상자 의 왼쪽 상단 좌 표를 이 셀 의 왼쪽 상단 좌표 로 변경 합 니 다.

//     
  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";

마우스 이동 중 원 선택 상자 의 너비 변경 하기;

evt = window.event || arguments[0];
   if (isSelect) {
    if (selDiv.style.display == "none") {
     selDiv.style.display = "";
    }
    //        
    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";

마우스 가 들 어 올 릴 때 원 선 된 셀 을 계산 하고 스타일 을 변경 합 니 다.

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;
}

총결산
위 에서 말 한 것 은 소 편 이 소개 한 ant design 실현 권 선택 기능 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!