jEasyUI 트리 메뉴 드래그 앤 드롭 제어

애플리케이션에서 Tree 플러그인을 사용할 때 사용자가 노드 위치를 변경할 수 있도록 드래그 앤 드롭 기능이 필요합니다. 드래그 앤 드롭 작업을 활성화하려면 Tree 플러그인의 'dnd' 속성을 true로 설정하기만 하면 됩니다.

트리 메뉴 생성(Tree)

	$('#tt').tree({
		dnd: true,
		url: 'tree_data.json'
	});

트리 노드에 drop 작업이 발생하면 'onDrop' 이벤트가 발생하며, 노드 상태를 원격 서버에 저장하는 등 일부 이상의 작업을 수행해야 합니다. , 등.

	onDrop: function(targetNode, source, point){
        var targetId = $(target).tree('getNode', targetNode).id;
        $.ajax({
            url: '...',
            type: 'post',
            dataType: 'json',
            data: {
                id: source.id,
                targetId: targetId,
                point: point
            }
        });
    }

jQuery EasyUI 예제 다운로드

jeasyui-tree-tree5.zip