드래그 앤 드롭으로 반응 테이블 열 재정렬

행과 열의 순서를 변경할 수 있어야하는 html 테이블이 있습니다.드래그 앤 드롭으로 반응 테이블 열 재정렬

재 배열 행 straight forward 꽤이지만 열의 셀이 같은 부모 요소를 공유하지 않기 때문에 열을 다시 정렬하는 것은 매우 어렵다.

<table> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    </tr> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    </tr> 
</table>

어떻게 반응으로 열 드래그를 구현합니까?

2016-11-21 HaNdTriX

해결 방법을 찾으셨습니까? Im은 똑같은 문제를 고집했다. – morne

이것은 작동 할 수도 있습니다. https://github.com/schrodinger/fixed-data-table-2 – morne

아니요 아직 없습니다. 나는 더 간단한 접근법을 사용했다. – HaNdTriX

열 인덱스가 사용될 데이터와 뷰간에 추상화 계층을 추가해야합니다. 예를 들면 다음과 같습니다.

var data : [["a","b","c"],["a2","b2","c2"]]; 
var columns = [2,1,0]; 

function getData(row, col) { 
    return data[row][columns[col]]; 
}

그런 다음 열을 드래그하면 열 var에서 색인 만 변경됩니다.

2016-11-21 21:46:17 Nosyara

답변 해 주셔서 감사합니다. 하지만 내 문제는 공통 루트 노드를 공유하지 않기 때문에 여러 요소를 동시에 끌 수 없다는 것입니다. 답변은 성능 문제를 해결합니다. 내 질문은 더 많은 DOM/React 지향이다. – HaNdTriX

내 생각에는 드래그 미리보기가 어떻게 보이는지 완전히 제어 할 수있는 맞춤 드래그 레이어를 구현해야합니다. 기본 미리보기에서 가져올 단일 셀 대신 열을 렌더링합니다.

그런 다음 열을 끌면 모든 셀에 display : none 또는 something이 표시되어 사라 지도록 할 수 있습니다. 그러면 사용자 정의 DragLayer는 사용자에게 새로운 테이블에 렌더링 된 열을 사용자에게 표시합니다. 시사.

그는 여기에 사용자 정의 DragLayer를 작성하는 방법에 대한 꽤 좋은 자습서가 있습니다 : http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html 당신이 도움을받을 수 있습니다.

2016-12-20 04:27:37

답변