jQuery Draggable 및 Droppable을 사용하여 드래그 앤 드롭을 구현하는 방법 function_jquery
- WBOY원래의
- 2016-05-16 17:29:531639검색
이전 글에서는 웹 개발의 기본 드래그 앤 드롭 원리를 소개했고, 이제 완성해야 할 기능을 알려드리겠습니다. 최종 실행 효과 는 다음과 같습니다.
주요 기능 요구사항 설명:
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"}) }
});
요소를 지정된 영역으로 드래그한 다음 작업을 해제해야 합니다. "넣기" 작업을 완료합니다. 위 그림에서 볼 수 있듯이 요소의 왼쪽 상단 가장자리와 왼쪽 하단 가장자리를 배열에 저장합니다. 그런 다음 "드래그" 과정에서 드래그의 왼쪽이 항상 기록됩니다. 오른쪽에 배치되면 현재 요소가 배치될 위치를 판단할 수 있습니다. 코드를 다운로드하여 세부정보를 볼 수 있습니다.
코드 완성 후 렌더링은 다음과 같습니다.
코드 다운로드: