JQuery UI에서 제공하는 API는 드래그 앤 드롭 기능 개발을 크게 단순화합니다. 드래그 소스와 타겟에서 각각 드래그 가능 및 드롭 가능 함수를 호출하기만 하면 됩니다.
드래그 앤 드롭의 원리
우선 몇 가지 개념을 명확히 해야 합니다.
소스 : 드래그 소스, 드래그할 요소.
Taerget: 드래그 앤 드롭 대상, 소스에 배치할 수 있는 컨테이너입니다.
드래그 동작은 다음과 같이 구분됩니다.
1. 드래그 시작: 드래그 소스(소스) 위에서 마우스를 누르고 이동을 시작합니다.
2. 드래그 이동: 이동하는 동안
3. 드래그 Enter : 대상 컨테이너로 이동
4. drag Leave : 대상 컨테이너 밖으로 이동
5. drop : 대상 컨테이너에서 마우스 놓기
6. drag end : end
HTML5 이전, 페이지 요소는 드래그 이벤트를 직접 지원하지 않았습니다. 따라서 드래그 앤 드롭 기능은 마우스 이벤트를 수신하고 드래그 앤 드롭 상태를 기록하여 구현됩니다.
가장 간단한 예
가장 간단한 드래그는 요소가 위치한 컨테이너를 변경하지 않고 위치만 변경합니다. 예시는 다음과 같습니다.
;p>드래그하세요!
script type="text/javascript " src="js/ jquery-1.7.min.js">
<script> <br>$(function() { <br>$( "#dragsource" ).draggable(); <br>$( "#droppable" ).droppable() <br></script>
;/html>
이벤트 모니터링 및 피드백(Feedback)
이전 예제를 실행해보면 정말 대상 컨테이너에 배치된 것인지 헷갈릴 수 있습니다. ? 사용자들도 같은 의심을 갖게 될 것입니다. 따라서 드래그 과정에서 발생하는 일부 이벤트를 모니터링하고 사용자에게 시각적으로 알릴 수 있습니다. 이것을 피드백이라고 합니다.
소스의 경우 모니터링할 수 있는 이벤트는 다음과 같습니다.
create: 소스에 드래그 가능한 기능이 적용될 때 트리거됩니다. start: 드래그가 시작될 때 트리거됩니다.
drap: 드래그 중에 트리거됩니다. 이동
중지: 해제 시 트리거 대상(대상)에 대해 모니터링할 수 있는 이벤트는 다음과 같습니다.
생성: 대상에 드롭 가능한 기능이 적용될 때 트리거
활성화: 현재 드래그 소스를 이 타겟에 드롭할 수 있으면
을 트리거합니다. 비활성화: 이 타겟에 드롭할 수 있는 드래그를 중지하면
을 트리거합니다. 🎜>. Out: 소스를 대상에서 멀리 드래그합니다.
소스를 대상으로 해제합니다.
이벤트 처리 기능은 draggable 및 droppable 함수의 매개변수를 통해 전달되며 이러한 이벤트 처리에서 Feedback이 수행될 수 있습니다. 기능. 실제 예를 살펴보세요:
코드 복사
코드는 다음과 같습니다.
<머리>
<본문>
<스크립트>
$(function() {
$( "#dragsource" ).draggable({
start: function(event,ui) {
$(this).find("p"). html(":-S");
},
stop:function(event,ui){
$(this).find("p").html(":-|");
}
})
$( "#droppable" ).droppable({
activate: function(event,ui) {
$(this).find(" p").html( "여기에 드롭하세요!" );
},
over: function(event,ui) {
$( this ).find( "p" ).html( "아, 응!" );
},
out: function(event,ui) {
$( this ).find( "p" ).html( "나를 떠나지 마세요!" );
},
drop: function( event, ui ) {
$( this ).find( "p" ).html( "해냈습니다!" ); 🎜>}
})
})
