이전 글에서는 웹 개발의 기본 드래그 앤 드롭 원리를 소개했고, 이제 완성해야 할 기능을 알려드리겠습니다. 최종 실행 효과 는 다음과 같습니다.
주요 기능 요구사항 설명:
1. 왼쪽의 요소 구조가 최종적으로 통과합니다. Ajax 호출 서버 데이터에서 생성되며 다중 레벨 요소를 지원할 수 있습니다. 상위 노드는 축소될 수 있습니다
2. 사용자는 드래그 앤 드롭 작업을 통해 요소를 왼쪽에서 오른쪽으로 드래그할 수 있습니다. 상위 노드 요소를 드래그하는 경우 하위 노드의 요소도 함께 오른쪽으로 드래그해야 합니다
3. 요소를 오른쪽에 배치합니다. 요소를 수용할 수 있는 오른쪽 영역에는 두 가지 가능성이 있습니다. 하나는 "East China Jiaotong University"에 표시된 것과 유사한 새로운 영역을 만드는 것입니다. 또 다른 방법은 이미 요소가 있는 영역으로 끌어서 놓는 것입니다. 둘 사이의 관계는 '또는'입니다. 단일 요소 영역에는 "not" 및 "and" 관계가 있습니다. 노드 요소를 삭제하려면 오른쪽의 삭제 버튼을 클릭하세요.
1단계: 왼쪽 요소를 드래그할 수 있습니다.
공식적인 예는 드래그할 요소에 직접 class="ui-widget-content"를 추가하는 것입니다. 처음에는 드래그하려는 모든 요소에 "ui-widget-content" 카테고리를 추가했습니다. 하지만 드래그 결과를 테스트해 보니 해당 요소는 해당 컨테이너 내부에서만 드래그할 수 있는 것으로 나타났습니다. 오른쪽으로 드래그하면 div에 가로 또는 세로 스크롤 막대가 나타납니다. 제가 매개변수를 잘못 설정한 것인지 모르겠습니다. 컨테이너에 Overflow:auto가 설정되어 있습니다.
효과는 아래와 같습니다.
마지막 왼쪽 요소 노드는 Ajax를 통해 액세스하여 백그라운드에서 json 데이터를 반환하고, 그런 다음 Javascript를 통해 동적으로 이 구조를 생성하려면 드래그 이벤트를 동적으로 생성된 요소에 바인딩할 수 없고 드래그 가능한 메서드를 호출할 수 없기 때문에 이 div를 페이지에 유지하는 소위 "중간 드래그 가능한 요소"를 사용했습니다. 기본적으로 표시되지 않으며 사용자가 왼쪽에 있는 요소를 드래그하기 시작하자마자 표시됩니다. 물론 여기에는 수동으로 많은 코드를 추가해야 합니다.
2단계: 드래그할 요소의 내용을 draggableDiv에 복사합니다. 상위 노드를 드래그할 때 그 아래의 하위 노드 요소도 오른쪽으로 드래그 앤 드롭해야 합니다. 드래그된 자식 노드 요소인 경우 자식 노드 요소가 오른쪽에 바로 표시됩니다. 왼쪽 트리 구조의 노드는 무한할 수 있으므로 부모 노드와 자식 노드는 상대적입니다. 따라서 요소는 자식 노드 요소이자 부모 노드 요소일 수 있습니다. mousedown 및 mouseup 이벤트를 수신하면 사용자가 요소를 드래그하고 있는지 확인할 수 있습니다. 이 단계의 원리는 아래 그림과 같습니다.
사용자가 B 노드를 드래그하면 먼저 콘텐츠를 노드에 복사합니다. B 요소를 draggableDiv 요소로 드래그하면 사용자가 B 요소를 드래그하면 실제로 draggableDiv 요소가 드래그됩니다. 따라서 클릭한 B 요소의 위치를 계산한 다음 드래그할 때 draggableDiv가 올바른 위치를 표시하도록 해야 합니다. 그러면 드래그는 draggableDiv 요소이고 사용자는 드래그된 B 노드 요소처럼 보입니다.
var clickElement = $(". threepanels .ptreelist ").bind("mousedown",function (event) {
//현재 mousedown 요소의 콘텐츠 가져오기
var itemContent = $(this).html(); var draggableDiv = $( "#draggableDiv") ;
$(draggableDiv).css({ "display": "block", "height": 0 })
//클릭한 요소의 내용 복사
clickElement = $(this).clone ();
var currentdiv = $(this).offset(); $(draggableDiv).css({ "top": currentdiv.top, "left": currentdiv.left }); draggableDiv.trigger(event) ;
//기본 동작 취소 return false }); ": "0" }) ; });
//요소를 드래그할 때 마우스 위치
var dragDivLeft = 0;
var dragDivTop = 0;
$("#draggableDiv" ).draggable({ containment: "parent ", drag: function (event, ui) { $("#draggableDiv").css({ "width": "260px", "height": "22px" });
$("#draggableDiv") .append(clickElement);
var closeTop = $(".closeBar").offset().top
dragDivLeft = event.target.offsetLeft; = event.target.offsetTop; },
stop: function () {
//드래그 완료 후 드래그 컨테이너 내용 비우기
$("#draggableDiv").html("") ;
$("#draggableDiv" ).css({"height":"0"}) }
});
3단계: 요소 오른쪽은 지정된 위치에 배치할 수 있습니다
요소를 지정된 영역으로 드래그한 다음 작업을 해제해야 합니다. "넣기" 작업을 완료합니다. 위 그림에서 볼 수 있듯이 요소의 왼쪽 상단 가장자리와 왼쪽 하단 가장자리를 배열에 저장합니다. 그런 다음 "드래그" 과정에서 드래그의 왼쪽이 항상 기록됩니다. 오른쪽에 배치되면 현재 요소가 배치될 위치를 판단할 수 있습니다. 코드를 다운로드하여 세부정보를 볼 수 있습니다.
코드 완성 후 렌더링은 다음과 같습니다.
코드 다운로드:
DragandDrop.rar