JQuery UI의 드래그 앤 드롭 기능 구현 방법 요약_jquery

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( "해냈습니다!" ); 🎜>}
})
})

复移动 前면적例子 경계,另一种常见的场景是复拖动。比如visio中的从画板中拖动원素到画布.这是通过드래그 가능한 도우미参数设설정적입니다.

도우미는 "원본", "복제", "복제", "원본"是默认值,即拖动自身,而c 고독한 表示创建자동으로 사용할 수 있는 것은 도우미입니다.候，需要에서 target上指定drop事件函数， 에서 该函数中将特定的 元素添加到target容器上,否则drop的时候什么事情时候什么事情書不会发生.
简单复主例子如下:

复제代码 代码如下:

<본문>

拽我!

<스크립트>
$(function() {
$( "#dragsource" ).draggable({
helper:"clone"
});

$("#container") .droppable({
drop:function(event,ui){
$(this).append($("

클론

"))
}
})






拖动控置

到目前位置，所有的例子中書可以对source随意拖动。재实际应用中经常需要对拖动行为进行控제입니다.下side给几个例子.
拖动方向

默认拖动方向为x,y两个方向.平或竖直拖动。如下：

复代码 代码如下:

<본문>

--

|

<스크립트>
$(function() {
$("#dragX").draggable({axis:"x"});
$("#dragY").draggable({axis:"y" })
});





드래그 범위
방향 외에도 포함 매개변수를 통해 드래그 범위를 제한할 수도 있습니다. 이 매개변수는 선택기, 요소, 문자열, 배열 유형을 허용합니다. 그 중 String은 parent, document, window가 될 수 있으며 Array는 직사각형 영역(regin)을 지정하는 4요소 배열([x1, y1, x2, y2])입니다. 다음 예에서는 범위 제한으로 parent 및 regin을 각각 지정합니다.

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

상위 항목

/div>

지역에서

🎜>

<스크립트 유형 =" text/javascript" src="js/jquery-ui-1.8.16.custom.min.js">
<script>$(function() { <br>$ ("#draggable1" ).draggable({containment: "parent" }); <br>$("#draggable2").draggable({containment: [20,20,300,200] }); <br></script>




드래그 중에도 사용 가능 다른 요소나 그리드에 스냅합니다. 다음과 같이 스냅 매개변수를 사용하여 스냅할 요소를 지정하고 그리드 매개변수를 사용하여 그리드에 스냅하도록 지정합니다.

코드 복사


코드는 다음과 같습니다.

<본문>

떨어지지 않으면 되돌립니다

여기로 데려다주세요

<스크립트>
$(function() {
$( "#draggable2" ).draggable({ revert: "invalid",cursor: "move",cursorAt: { top: 56, left: 56 } });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( 이벤트, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" )
}
})
});

소형
JQuery UI는 JQuery UI와 매우 유사합니다.常用的各种用法。更더 많은 参数还可以参考官方网站의드래그 가능 및 드롭 가능 。

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：JavaScript 고급 3장 Ajax, JSON 및 프로토타입 소개_기본 지식다음 기사：JavaScript 고급 3장 Ajax, JSON 및 프로토타입 소개_기본 지식

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술