jQuery를 UI 예 - 드래그 (드래그 가능한)
마우스를 허용하는 요소를 이동합니다.
드래그 상호 작용에 대한 자세한 내용은 API 설명서를 참조 끌어 위젯 (드래그 위젯)을 제거 할 수 있습니다 .
기본 기능
모든 DOM 요소의 드래그 기능을 활성화합니다. 클릭하고 드래그 객체를 이동하려면 뷰포트에서 마우스를 드래그하여.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 기본 기능 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#draggable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em;}
</ 스타일>
<스크립트>
$ (함수 () {
$ ( "#draggable") .draggable ();
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠">
<P> 저를 끌어주세요! </ P>
</ DIV>
</ BODY>
</ HTML>
자동 스크롤
드래그 뷰포트 외부로 이동 문서를 통해 자동으로 스크롤. 세트 scroll 자동 스크롤, 미세 조정, 트리거 스크롤 스크롤 속도를 사용하려면 true로 옵션을 scrollSensitivity 및 scrollSpeed 옵션을 설정합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 자동 스크롤 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#draggable, #의 draggable2, #의 draggable3 {폭 : 100 픽셀, 높이 100 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 0 10px 10px 0;}
</ 스타일>
<스크립트>
$ (함수 () {
.draggable $ ( "#draggable"() {스크롤 : 사실});
$ ( "# Draggable2") .draggable ({스크롤 : 사실, scrollSensitivity : 100});
$ ( "# Draggable3") .draggable ({스크롤 : 사실, 스크롤 속도 (Scrollspeed) : 100});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠">
<P> 스크롤을 true로 설정, 기본 설정 </ P>
</ DIV>
<사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠">
<P> 100 scrollSensitivity </ P>
</ DIV>
<사업부 아이디 = "draggable3"클래스 = "UI 위젯 콘텐츠">
<P> 100 스크롤 속도 (Scrollspeed) </ P>
</ DIV>
<사업부 스타일 = "높이 : 5000px; 폭 : 1 픽셀;"> </ DIV>
</ BODY>
</ HTML>
제한된 움직임
경계에 의해 정의 드래그 영역은 각 드래그의 이동을 제한합니다. 설정 axis x 축 또는 y 축, 또는에 대한 드래그 경로를 제한하는 옵션을 containment 와 같은 부모 DOM 요소 또는 jQuery를 선택, 지정 옵션 '문서를.'.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 제약 운동 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.draggable {폭 : 90 픽셀, 높이 : 90 픽셀; 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 0 10px 10px 0;}
#draggable, #의 draggable2 {마진 - 하단 : 20 픽셀;}
#draggable {커서 : N-크기 조정}
# Draggable2 {커서 : 전자 크기 조정}
# 봉쇄-래퍼 {폭 : 95 %; 높이 : 150 픽셀; 경계 : 2 픽셀 고체 #ccc; 패딩 : 10px;}
H3 {명확 : 왼쪽;}
</ 스타일>
<스크립트>
$ (함수 () {
.draggable $ ( "#draggable"() {축 : "Y"});
$ ( "# Draggable2") .draggable ({축 : "X"});
$ ( "# Draggable3") .draggable ({봉쇄 : "# 억제-래퍼"스크롤 : 거짓});
$ ( "# Draggable5") .draggable ({봉쇄 : "부모"});
});
</ 스크립트>
</ 헤드>
<바디>
<H3> 축 제약 조건에 따라 모션 : </ H3>
<사업부 아이디 = "드래그"클래스 = "드래그 UI 위젯 콘텐츠">
<P> 만 수직 드래그 </ P>
</ DIV>
<사업부 아이디 = "draggable2"클래스 = "드래그 UI 위젯 콘텐츠">
<P> 만 수평 드래그 </ P>
</ DIV>
<H3> 다른 DOM 요소에 제한 동작이나 </ H3>
<사업부 아이디 = "봉쇄-래퍼">
<사업부 아이디 = "draggable3"클래스 = "드래그 UI 위젯 콘텐츠">
<P> 나는 상자에 제약을 받았습니다 </ P>
</ DIV>
<사업부 클래스 = "드래그 UI 위젯 콘텐츠">
<P ID = "draggable5"클래스 = "UI 위젯 헤더"> 내가 부모 요소 내에 국한 된 </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
커서 스타일
객체를 드래그하면 커서를 위치합니다. 기본적으로 커서가 중간 개체 드러그이다. 사용 cursorAt 다른에 대한 상대적인 위치 지정 옵션을 드래그의 (화소 값의 상단에 대해 지정을, 오른쪽, 아래, 왼쪽). 으로 유효한 CSS 커서 값을 제공함으로써 cursor 옵션 커서의 모양을 사용자 정의합니다. 유효한 CSS 커서 값은 다음과 같습니다 등등 기본, 이동, 포인터, 십자선하고 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 커서 스타일 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#draggable, #의 draggable2, #의 draggable3 {폭 : 100 픽셀, 높이 100 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 0 10px 10px 0;}
</ 스타일>
<스크립트>
$ (함수 () {
$ ( "#draggable") .draggable ({커서 : "이동", cursorAt : {최고 : 56, 왼쪽 : 56}});
( "# Draggable2") .draggable $ ({ "십자선", cursorAt : {최고 : -5, 왼쪽 : 커서가 -5}});
$ ( "# Draggable3") .draggable ({cursorAt : {바닥 : 0}});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠">
<P> 내가 (마우스에 대한) 중간에 항상 해요 </ P>
</ DIV>
<사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠">
<P> 내 커서가 왼쪽 -5 최고 -5 </ P>
</ DIV>
<사업부 아이디 = "draggable3"클래스 = "UI 위젯 콘텐츠">
<P> 내 유일한 '바닥'값을 커서의 위치를 제어 </ P>
</ DIV>
</ BODY>
</ HTML>
지연 시작
으로 delay 지연 (밀리 초) 옵션 설정을 끌기 시작합니다. 으로 distance 옵션을 누르면 드래그 앤 드롭을 허용하기 전에 지정된 픽셀에 커서를 끕니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 지연 시작 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#draggable, #의 draggable2 {폭 : 120 픽셀, 높이 120 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 0 10px 10px 0;}
</ 스타일>
<스크립트>
$ (함수 () {
$ ( "#draggable") .draggable ({거리 : 20});
$ ( "# Draggable2") .draggable ({지연 : 1000});
$ ( ".ui-드래그 가능한") .disableSelection ();
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠">
<P> 만 나는 20 픽셀을 끌어 드래그 시작했을 때 </ P>
</ DIV>
<사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠">
후 <P> 아무리 드래그해야 드래그가 1000MS 기다려야하기 시작했다 얼마나 많은 거리 </ P>
</ DIV>
</ BODY>
</ HTML>
행사
에 드래그 start , drag 및 stop 이벤트. 시작 트리거 끌기 start 이벤트를 드래그하는 동안 발생 drag , 이벤트 트리거 될 때 드래그 정지 stop 이벤트입니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 이벤트 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#draggable {폭 : 16em; 패딩 : 0 1em;}
#draggable 울 리 {마진 : 1em 0; 패딩 : 0.5em 0;} * html로 #draggable 울 리 {높이 : 1 %;}
#draggable UL의 리 span.ui-아이콘 {플로트 : 왼쪽;}
#draggable UL의 리 span.count {글꼴 무게 : 굵게;}
</ 스타일>
<스크립트>
$ (함수 () {
var에 $ start_counter = $ ( "# 이벤트 시작"),
$ Drag_counter = $ ( "# 이벤트 드래그"),
$ Stop_counter = $ ( "# 이벤트 스톱"),
카운트 = [0, 0, 0];
{(.draggable $ ( "#draggable")
시작 : 함수 () {
계수 [0] ++;
updateCounterStatus ($의 start_counter, 카운트 [0]);
},
드래그 : 함수 () {
계수 [1] ++;
updateCounterStatus ($의 drag_counter, 카운트 [1]);
},
중지 기능 () {
카운트 [2] ++;
updateCounterStatus ($의 stop_counter, 카운트 [2]);
}
});
{updateCounterStatus ($의 event_counter, NEW_COUNT)를 작동
// 첫 번째 시각적 상태를 업데이트 ...
만약 (! $ event_counter.hasClass ( "UI 상태-호버")) {
$ Event_counter.addClass ( "UI 상태-호버")
. .siblings () RemoveClass ( "UI 상태-호버");
}
// ... 그 다음 번호를 $ ( "span.count", $의 event_counter)는 .text (NEW_COUNT)를 업데이트;
}
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "드래그"클래스 = "UI 위젯 UI 위젯 콘텐츠">
<P> 이벤트의 체인을 트리거링, 저를 드래그하십시오. </ P>
<UL 클래스 = "UI 헬퍼 리셋">
<리 ID = "이벤트 시작"클래스 = "UI 상태 기본 UI 코너 - 모든"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 플레이"> </ SPAN>라고 "시작"<스팬 클래스 = "수"> 0 </ SPAN> X </ 리>
<리는 ID가 = "이벤트 드래그"클래스 = "UI 상태 기본 UI 코너 - 모든"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 화살표-4"> </ 스팬> "드래그"이라고 <스팬 클래스 = "수"> 0 </ SPAN> X </ 리>
<리 ID = "이벤트 스톱"클래스 = "UI 상태 기본 UI 코너 - 모든"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 스톱"> </ SPAN>라고 "중지"<스팬 클래스 = "수"> 0 </ SPAN> X </ 리>
</ UL>
</ DIV>
</ BODY>
</ HTML>
핸들
커서 부분을 드래그에 드래그 지정된 경우에만 허용된다. 사용 handle 드래그 된 객체에 대한 jQuery를 선택의 요소 (또는 요소의 그룹을)를 지정하는 옵션을 선택합니다.
하거나 드래그 허용 끌어 내에서 커서 지정된 요소 (또는 요소 그룹). 사용 handle 드래그 기능을 jQuery를 선택을 취소 지정하는 옵션을 선택합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 핸들 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#draggable, #의 draggable2 {폭 : 100 픽셀, 높이 100 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 0 10px 10px 0;}
#draggable P {커서 : 이동;}
</ 스타일>
<스크립트>
$ (함수 () {
.draggable $ ( "#draggable"() {손잡이 : "P"});
$ ( "# Draggable2") .draggable ({취소 "p.ui 위젯 헤더"});
$ ( "사업부, P") .disableSelection ();
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠">
<P 클래스 = "UI 위젯 헤더"> 당신은 드래그 앤이 범위 내에서 삭제할 수 있습니다 I </ P>
</ DIV>
<사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠">
<P> 당신은 드래그 중 & hellip 주위에 나를 걸릴 수 있습니다; </ P>
<P 클래스 = "UI 위젯 헤더"> 중 & hellip;을하지만 당신은이 범위에서 저를 </ P> 끌 수 없습니다
</ DIV>
</ BODY>
</ HTML>
위치 복원
에서와 같이 부울 값이 revert 드래그 옵션을 드래그 중지 할 때 원래 위치로 (또는 보조) 드래그 돌아갑니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 위치를 복원 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#draggable, #의 draggable2 {폭 : 100 픽셀, 높이 100 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 0 10px 10px 0;}
</ 스타일>
<스크립트>
$ (함수 () {
.draggable $ ( "#draggable"() {되돌리기는 true});
$ ( "# Draggable2") .draggable ({복귀 : 사실, 도우미 : "복제"});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠">
<P> 복원 </ P>
</ DIV>
<사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠">
<P> 길잡이를 복원 </ P>
</ DIV>
</ BODY>
</ HTML>
그리드 요소에 스냅 또는
드래그 내부 또는 외부 테두리 DOM 요소를 맞 춥니 다. 의 사용 snap , snapMode (내부, 외부 모두) 및 snapTolerance 옵션 (때 픽셀 요소들 사이의 드래그 거리에 정렬 부르심).
그리드 또는 드래그에 맞 춥니 다. 으로 grid 크기 옵션 격자 세포 (픽셀 높이 또는 폭)을 설정합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 그리드 요소에 정렬 또는 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.draggable {폭 : 90 픽셀, 높이 : 픽셀 범위; 패딩 : 5px; 플로트 : 왼쪽, 여백 : 0 10px 10px 0; 글꼴 크기 : .9em을}
.ui-위젯 헤더 페이지, .ui-위젯 콘텐츠 P {마진 : 0;}
#snaptarget {높이 : 140px;}
</ 스타일>
<스크립트>
$ (함수 () {
$ .draggable ( "#draggable"() {스냅는 true});
$ ( "# Draggable2") .draggable ({스냅 : ".ui-위젯 헤더"});
$ ( "# Draggable3") .draggable ({스냅 : ".ui-위젯 헤더", snapMode "외부"});
$ ( "# Draggable4") .draggable ({그리드 : [20, 20]});
$ ( "# Draggable5") .draggable ({그리드 : [80, 80]});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "snaptarget"클래스 = "UI 위젯 헤더">
<P> 나는 목표를 정렬 </ P>은을이다
</ DIV>
<br style="clear:both">
<사업부 아이디 = "드래그"클래스 = "드래그 UI 위젯 콘텐츠">
<P> 기본 (스냅 : TRUE), 다른 모든 드래그 할 수있는 요소에 정렬 </ P>
</ DIV>
<사업부 아이디 = "draggable2"클래스 = "드래그 UI 위젯 콘텐츠">
<P> 저는 그냥 큰 상자에 정렬 </ P>
</ DIV>
<사업부 아이디 = "draggable3"클래스 = "드래그 UI 위젯 콘텐츠">
<P> 나는 단지 큰 상자의 바깥 쪽 가장자리에 정렬 </ P>
</ DIV>
<사업부 아이디 = "draggable4"클래스 = "드래그 UI 위젯 콘텐츠">
<P> 나는 20 × 20 그리드에 정렬 </ P>
</ DIV>
<사업부 아이디 = "draggable5"클래스 = "드래그 UI 위젯 콘텐츠">
<P> 나는 80 X 80 그리드에 정렬 </ P>
</ DIV>
</ BODY>
</ HTML>
시각적 피드백
방식 조수 개체를 드래그로, 사용자에게 피드백을 제공합니다. helper 옵션 (커서 드래그 사본) 값 '원본'(커서 드래그 개체), '클론'을 받아, 또는 기능 (드래그 디스플레이 주변에 커서 동안 요소) DOM 요소를 반환합니다. 으로 opacity 옵션은 투명도 지원을 제어합니다.
드래그 드래그 인 구별하기 위해, 전면을 유지하는 모션 드래그 할 수 있습니다. 이 드래그하는 경우, 사용 zIndex 보조 Z- 인덱스의 높이를 설정하거나 사용하는 옵션을 stack 드래그를 중지 할 때, 마지막은 항상 항목을 끌어 다른 프로젝트와 그룹의 상단에 표시되는 것을 확인하기 위해 옵션을 선택합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) - 시각적 피드백 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#draggable, #의 draggable2, #의 draggable3, #set가의 사업부 {폭 : 90 픽셀, 높이 : 90 픽셀; 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 0 10px 10px 0;}
#draggable, #의 draggable2, #의 draggable3 {마진 - 하단 : 20 픽셀;}
#set가 {맑은 : 모두; 플로트 : 왼쪽; 폭 : 368px; 높이 : 120 픽셀을}
P {맑은 : 모두; 여백 : 0; 패딩 : 1em 0;}
</ 스타일>
<스크립트>
$ (함수 () {
.draggable $ ( "#draggable"() {도우미 : "원래"});
$ ( "# Draggable2") .draggable ({불투명 : 0.7, 도우미 : "복제"});
$ ( "# Draggable3") .draggable ({
커서 : "이동"
cursorAt : {최고 : -12은 왼쪽 : -20}
도우미 : 함수 (이벤트) {
$를 반환 ( "<DIV 클래스 = 'UI 위젯 헤더는'> 나는 정의 도우미 </ DIV>이야");
}
});
$ ( "#set가 사업부") .draggable ({스택 : "#set가의 사업부를"});
});
</ 스크립트>
</ 헤드>
<바디>
<H3 클래스 = "문서"> 도우미 : </ H3>
<사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠">
<P> 원래 </ P>
</ DIV>
<사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠">
<P> 반투명 클론 </ P>
</ DIV>
<사업부 아이디 = "draggable3"클래스 = "UI 위젯 콘텐츠">
<P> (cursorAt와 함께) 사용자 보조 </ P>
</ DIV>
<H3 클래스 = "문서"> 스택 : </ H3>
<사업부 아이디 = "설정">
<사업부 클래스 = "UI 위젯 콘텐츠">
<P> 우리는 draggables .. </ P>
</ DIV>
<사업부 클래스 = "UI 위젯 콘텐츠">
<P> .. 그것은 Z- 인덱스가 자동으로 조절입니다 .. </ P>
</ DIV>
<사업부 클래스 = "UI 위젯 콘텐츠">
<P> .. 스택 옵션. </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
jQuery를 UI 드래그 가능한 + 정렬 가능한
드래그와 원활한 상호 작용의 정렬 가능한.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 드래그 (드래그 가능한) + 정렬 (정렬 가능한) </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
UL {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 마진 - 하단 : 10px;}
리 {여백 : 5px; 패딩 : 5px; 폭 : 150 픽셀;}
</ 스타일>
<스크립트>
$ (함수 () {
{(.sortable $ ( "#sortable")
복귀 : 사실
});
{(.draggable $ ( "#draggable")
connectToSortable "#sortable"
도우미 : "복제"
복귀 : "무효"
});
$ ( "UL, 리") .disableSelection ();
});
</ 스크립트>
</ 헤드>
<바디>
<UL>
<리 ID = "드래그"클래스 = "UI 상태-강조"> 나 드래그하세요 </ 리>
</ UL>
<UL 아이디 = "정렬">
<리 클래스 = "UI 상태 기본"> 항목 1 </ 리>
<리 클래스 = "UI 상태 기본"> 항목 2 </ 리>
<리 클래스 = "UI 상태 기본"> 항목 3 </ 리>
<리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
<리 클래스 = "UI 상태 기본"> 항목 5 </ 리>
</ UL>
</ BODY>
</ HTML>