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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 최고의 그래픽 설정

4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

2 몇 주 전 By DDD

R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 채팅 명령 및 사용 방법

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7529

15

Cakephp 튜토리얼

1378

52

Steam의 계정 이름 형식은 무엇입니까?

81

11

Win11 활성화 키 영구

54

19

NYT 연결 힌트와 답변

21

75

더보기