ExtJS technology_extjs를 사용하여 구현된 드래그 트리 노드-JS 튜토리얼-php.cn

ExtJS technology_extjs를 사용하여 구현된 드래그 트리 노드

WBOY

풀어 주다： 2016-05-16 18:21:51

원래의

1024명이 탐색했습니다.

1. 노드의 드래그 앤 드롭 위치
노드 드래그 앤 드롭에는 드래그 앤 드롭이라는 두 가지 작업이 포함됩니다. 드래그는 이해하기 쉽습니다. 이는 노드를 위로 드래그하는 것을 의미하며, 어떤 노드를 드래그하더라도 효과는 동일합니다. 그러나 노드 배치는 더 복잡합니다. 노드 배치는 다음 두 가지 상황으로 나눌 수 있습니다.

노드 추가: 드래그한 노드가 리프가 아닌 노드의 바로 위에 배치되면 TreePanel 구성 요소는 노드를 다음 리프가 아닌 노드로 이동합니다. 해당 노드의 하위 노드입니다. TreePanel의 제한으로 인해 리프 노드를 추가할 수 없습니다.
동일한 레이어에서 위아래로 이동(위 및 아래): 드래그한 노드를 리프 노드에 배치하거나 리프 노드가 아닌 측면에 배치하면 드래그된 노드가 형제 노드로 처리됩니다. 장소.
다음 설정은 TreePanel 구성 요소를 드래그 가능한 상태로 설정합니다.

브라우저 주소 표시줄에 다음 URL을 입력하세요:
http://localhost:8080/netdisk/tree/drapdrop.html
트리 노드가 표시되면 위의 드래그를 사용하세요 메서드를 사용하여 노드를 드래그하면 그림 1, 그림 2, 그림 3과 같이 드래그 효과가 나타납니다.

그림 1 [English] 노드는 [컴퓨터]의 하위 노드가 됩니다.

그림 2 [English] 노드는 [Computer]의 형제 노드가 되며 [Computer] 노드의 앞으로 이동됩니다(위드래그 앤 드롭

그림 3 두 리프 노드의 상호작용 위치(아래드래그 앤 드롭)
2 . 리프 노드 추가 활성화

기본적으로 TreePanel은 ExtJS의 호환성을 유지하기 위해 이러한 제한이 합당한지 불합리한지 여부에 관계없이 리프 노드를 추가할 수 없도록 규정합니다. 버전에서는 독자들이 ExtJS 소스 코드를 수정하지 않도록 노력해야 합니다. 그러나 때로는 리프 노드에 추가해야 할 수도 있습니다. 이 경우 TreePanel의 nodedragover 이벤트를 통해
TreePanel이 내부적으로 이를 결정할 수 있습니다. leaf 매개변수가 true이면 노드 추가가 허용됩니다. TreePanel이 노드 추가를 금지하는 원리를 이해한 후에는 nodedragover 이벤트를 통해 이 문제를 쉽게 해결할 수 있습니다. 매개변수 값의 target 속성을 통해 얻은 노드가 위치한 대상 노드를 드래그하고 nodedragover 메소드에서 해당 노드의 리프 속성 값을 false로 설정합니다.

코드 복사 코드는 다음과 같습니다.

tree.on("nodedragover", function(e){
var node = e.target;
if(node.leaf)
node.leaf=false;
return
});
브라우저 주소 표시줄에 다음 URL을 입력하세요.
http://localhost:8080/netdisk/tree/leafappend.html
트리 구조가 표시된 후 노드를 리프 노드로 드래그한 다음 이를 드롭하면 리프 노드 아래에 자식 노드가 생성되고 그림 4와 같이 리프 노드의 아이콘이 리프가 아닌 노드의 아이콘으로 변경됩니다.

그림 4 에서는 리프 노드를 추가

할 수 있습니다. 또한 다른 트리 노드도 있습니다. 드래그 방법의 경우, 책
"Everyone Plays Happy Net: Ext JS Android SSH 웹 및 모바일 SNS 통합 개발"의 해당 장을 참조하세요.