react.js 구성 요 소 는 드래그 복사 와 정렬 가능 한 예제 코드 를 실현 합 니 다.

복 사 를 실현 하기 전에 이전 드래그 정렬 구성 요소 속성 을 수정 하 였 습 니 다.

value 의 content 속성 을 버 리 고 구성 요소 가 노출 된 render 함 수 를 끌 어 당 겨 서 이 속성 을 이용 하여 구성 요소 내부 서브 구성 요소 의 렌 더 링 을 한다.이 점 은 주로 개미 금 복 의Ant design안의 일부 구성 요소 의 디자인 을 참고 했다

Data 와 model 의 연근 을 제거 하기 위해 sortKey 와 마찬가지 로 구성 요 소 는 codeKey 속성 을 증가 합 니 다

드래그 복사 효 과 는 다음 과 같 습 니 다:

구성 요 소 를 실현 하 는 핵심 은 value 데이터 에 따라 페이지 를 렌 더 링 하 는 것 이기 때문에 드래그 복사 기능 을 실현 합 니 다.'드래그 해제'할 때 드래그 된 측의 데 이 터 를 현재 목표 가 있 는 value 배열 에 넣 으 면 됩 니 다.
구체 적 인 실현 코드 는 다음 과 같다.

//                               
 drop(dropedSort, data, sortKey, dropedUid, codeKey, ee) {
  ee.preventDefault();
  const code = ee.dataTransfer.getData("code");
  const uId = ee.dataTransfer.getData("uId");
  const dragedItem = ee.dataTransfer.getData("item");
  const sort = ee.dataTransfer.getData("sort");
  if (uId === dropedUid) {
   if (sort < dropedSort) {
    data.map(item => {
     if (item[codeKey] === code) {
      item[sortKey] = dropedSort;
     } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) {
      item[sortKey]--;
     }
     return item;
    });
   } else {
    data.map(item => {
     if (item[codeKey] === code) {
      item[sortKey] = dropedSort;
     } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) {
      item[sortKey]++;
     }
     return item;
    });
   }
  } else if (this.props.isAcceptAdd) {
   let objDragedItem = JSON.parse(dragedItem);
   if (data.filter(item => item[codeKey] === objDragedItem[codeKey]).length === 0) {
    const maxSort = Math.max.apply(Math, data.map(citem => citem[sortKey]));
    data.map(item => {
     if (dropedSort === maxSort) {
      objDragedItem[sortKey] = dropedSort + 1;
     } else {
      if (item.sort > dropedSort) {
       objDragedItem[sortKey] = dropedSort + 1;
       item[sortKey]++
      }
     }
     return item
    });
    data.push(objDragedItem)
   }
  }
  this.props.onChange(data)
  if (ee.target.className.indexOf('droppingContent') !== -1) {
   ee.target.className = styles.droppedcontent;
  }
 }

여기 서 주의해 야 할 것 은 두 가지 가 있다.
첫 번 째 는 this.props.isAcceptAdd 속성 을 통 해 현재 구성 요소 가 드래그 복사 요 소 를 받 아들 일 수 있 는 지 여 부 를 판단 합 니 다.
두 번 째 는 메모리 에 있 는"uId"가 있 습 니 다.이"uId"는 드래그 구성 요소 가 초기 화 될 때마다 생 성 됩 니 다.이렇게 하면 저 는 이 를 통 해 현재 대상 구역 으로 끌 려 가 는 요소 가 구성 요소 자체 의 내부 요소 인지 외부 요소 인지 판단 할 수 있 습 니 다.내부 라면 정렬 기능 을 실행 하고 외부 에 서 는 복사 한 논리 코드 를 실행 합 니 다.
구성 요소 API:

GitHub 주소:https://github.com/VicEcho/VDraggable
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.