최고의 jQuery를 UI 예 - 장소 (낙하 할) 튜토리얼 2024년, 이 튜토리얼에서는 기본 기능,허용,확산을 방지,드래그 위치를 복원,쇼핑 카트 데모,간단한 사진 관리자,시각적 피드백,를 배울 수 있습니다.
대상을 만들 드래그 할 수 위젯.
낙하 할 상호 작용에 대한 자세한 내용은 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 {폭 : 100 픽셀, 높이 100 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px 10px 10px 0;} #droppable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px;} </ 스타일> <스크립트> $ (함수 () { $ ( "#draggable") .draggable (); {(.droppable $ ( "#droppable") 드롭 : 함수 (이벤트, UI)를 { $ (이) .addClass ( "UI 상태 강조 표시") .find ( "P") 중에서 ( "떨어졌다!"); } }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠"> <P> 나 대상 위치로 끌어 보내 주시기 바랍니다! </ P> </ DIV> <사업부 아이디 = "낙하 할"클래스 = "UI 위젯 헤더"> <P> 여기 않는 곳에 보관하십시오! </ P> </ DIV> </ BODY> </ HTML>
사용 accept
낙하 할 받아들이는 요소 (또는 요소의 그룹) 타겟팅 옵션을.
<! 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"> <스타일> #droppable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px;} #draggable, # 드래그 - 잘못된 것으 {폭 : 100 픽셀, 높이 100 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px 10px 10px 0;} </ 스타일> <스크립트> $ (함수 () { $ ( "#draggable, # 드래그 가능한-잘못된 것으") .draggable (); {(.droppable $ ( "#droppable") 동의 : "#draggable" activeClass "UI 상태-가져가" hoverClass "UI 상태 활성" 드롭 : 함수 (이벤트, UI)를 { $ (이) .addClass ( "UI 상태 강조 표시") .find ( "P") 중에서 ( "떨어졌다!"); } }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "드래그 - 잘못된 것으"클래스 = "UI 위젯 콘텐츠"> <P> 내가 드래그 배치 할 수 없습니다 </ P> </ DIV> <사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠"> <P> 대상에 저를 끌어하시기 바랍니다 </ P> </ DIV> <사업부 아이디 = "낙하 할"클래스 = "UI 위젯 헤더"> <P> 동의 '#draggable'</ P> </ DIV> </ BODY> </ HTML>
중첩 된 낙하 할를 사용하는 경우 - 예를 들어, 폴더 및 문서 노드 트리 편집 가능한 디렉토리 구조를 가질 수있다 - greedy
옵션이 true로 설정되어 방지하기 위해 드래그가 (낙하 할) 때 자식 노드에 배치 될 때 이벤트 전달.
<! 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 {폭 : 100 픽셀, 높이 : 40px; 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px 10px 10px 0;} #droppable, #의 droppable2 {폭 : 230px; 높이 : 120 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px;} # 낙하 할-내부, #은 droppable2-내부 {폭 : 170px; 높이 : 60 픽셀; 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px를;} </ 스타일> <스크립트> $ (함수 () { $ ( "#draggable") .draggable (); $ ( "#droppable, #-낙하 할 내부") (.droppable { activeClass "UI 상태-가져가" hoverClass "UI 상태 활성" 드롭 : 함수 (이벤트, UI)를 { $ (이) .addClass ( "UI 상태 강조 표시") .find ( "> P") 중에서 ( "떨어졌다!"); false를 반환; } }); $ ( "# Droppable2, #의 droppable2-내부") .droppable ({ 욕심 : 사실, activeClass "UI 상태-가져가" hoverClass "UI 상태 활성" 드롭 : 함수 (이벤트, UI)를 { $ (이) .addClass ( "UI 상태 강조 표시") .find ( "> P") 중에서 ( "떨어졌다!"); } }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠"> <P> 대상에 저를 끌어하시기 바랍니다 </ P> </ DIV> <사업부 아이디 = "낙하 할"클래스 = "UI 위젯 헤더"> <P> 외부 낙하 할 </ P> <사업부 아이디 = "낙하 할-내부"클래스 = "UI 위젯 헤더"> <P> (욕심없이) 내부 낙하 할 </ P> </ DIV> </ DIV> <사업부 아이디 = "droppable2"클래스 = "UI 위젯 헤더"> <P> 외부 낙하 할 </ P> <사업부 아이디 = "droppable2-내부"클래스 = "UI 위젯 헤더"> <P> 내부 낙하 할 (욕심과) </ P> </ DIV> </ 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; 플로트 : 왼쪽, 여백 : 10px 10px 10px 0;} #droppable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px;} </ 스타일> <스크립트> $ (함수 () { .draggable $ ( "#draggable"() {되돌리기 : "유효"}); $ ( "# Draggable2") .draggable ({복귀 "무효"}); {(.droppable $ ( "#droppable") activeClass "UI 상태 기본" hoverClass "UI 상태-가져가" 드롭 : 함수 (이벤트, UI)를 { $ (이) .addClass ( "UI 상태 강조 표시") .find ( "P") 중에서 ( "배치!"); } }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠"> <P> 감축 목표에 배치 할 때 </ P> </ DIV> <사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠"> <P> 감소가 대상에 배치되지 않을 때 </ P> </ DIV> <사업부 아이디 = "낙하 할"클래스 = "UI 위젯 헤더"> <P> 여기에 넣어주세요 </ P> </ DIV> </ BODY> </ HTML>
제품의 디렉토리 구조를 표시 장바구니에 제품을 추가하기 위해 드래그 앤 드롭을 사용하도록 접이식 패널을 사용하는 방법을 보여줍니다, 쇼핑 카트 제품 정렬됩니다.
<! 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"> <스타일> H1 {패딩 : .2em; 여백 : 0;} #products {플로트 : 왼쪽; 폭 : 500 픽셀, 여백 오른쪽 : 2EM;} #cart {폭 : 200 픽셀, 플로트 : 왼쪽; 여백 - 상단 : 1em;} / * * 낙하 할 극대화하는 스타일의 목록을 정의 / #cart의 올 {여백 : 0; 패딩 : 1em 0 1em의 3em} </ 스타일> <스크립트> $ (함수 () { $ ( "#catalog")를 .accordion (); .draggable $ ( "#catalog 리"() { appendTo : "몸" 도우미 : "복제" }); .droppable $ ( "#cart 안녕") ({ activeClass "UI 상태 기본" hoverClass "UI 상태-가져가" ":하지 (.ui-정렬 헬퍼)"동의, 드롭 : 함수 (이벤트, UI)를 { $ (이) .find ( ".placeholder") .remove (); $ ( "<리> </ 리>")는 .text (ui.draggable.text ()) .appendTo (이에게); } }). 정렬 가능한 ({ 항목 : "리 :하지 (.placeholder)", 종류 : 함수 () { //이 문제를 해결할 수 connectWithSortable를 사용 // 낙하 할이 정렬 추가 항목과 상호 작용 가져 오기,하지만 당신은 활성 / hoverClass 옵션 $을 사용자 정의 할 수 없습니다 (이) .removeClass ( "UI 상태 기본"); } }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "제품"> <H1 클래스 = "UI 위젯 헤더"> 제품 </ H1> <사업부 아이디 = "카탈로그"> <H2> <a보기 </a> T 셔츠 </A> </ H2> <DIV> <UL> <리> 롤캣 셔츠 </ 리> <리> Cheezeburger 셔츠 </ 리> <리> Buckit 셔츠 </ 리> </ UL> </ DIV> <H2> <a의보기 </a> 가방 </A> </ H2> <DIV> <UL> <리> 얼룩말 줄무늬 </ 리> <리> 블랙 가죽 </ 리> <리> 악어 가죽 </ 리> </ UL> </ DIV> <H2> <a보기 </a> 가제트 </A> </ H2> <DIV> <UL> <리> 아이폰 </ 리> <리> 아이팟 </ 리> <리> 아이 패드 </ 리> </ UL> </ DIV> </ DIV> </ DIV> <사업부 아이디 = "장바구니"> <H1 클래스 = "UI 위젯 헤더"> 카트 </ H1> <사업부 클래스 = "UI 위젯 콘텐츠"> <안녕> <리 클래스 = "자리"> 여기에 제품을 추가 </ 리> </ 올> </ 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"> <스타일> #gallery {플로트 : 왼쪽; 폭 : 65 %; 분 높이 : 12em;} .gallery.custom 상태 활성 {배경 : #eee;} .gallery 리 {플로트 : 왼쪽; 폭 : 96px; 패딩 : 0.4em; 마진 : 0 0.4em 0.4em 0; 텍스트 정렬 : 센터;} .gallery의 리 H5 {마진 : 0 0 0.4em; 커서 : 이동;} .gallery 리 a를 {플로트 : 오른쪽;} .gallery의 리 a.ui - 아이콘 - zoomin {플로트 : 왼쪽;} .gallery의 리 IMG {폭 : 100 %; 커서 : 이동;} #trash {플로트 : 오른쪽; 폭 : 32 %; 분 높이 : 18em; 패딩 : 1 %;} #trash H4 {라인 - 높이 : 16px; 여백 : 0 0 0.4em;} #trash H4 .ui-아이콘 {플로트 : 왼쪽;} .gallery H5 {표시 : 없음;} #trash 없습니다 </ 스타일> <스크립트> $ (함수 () { //이 앨범 쓰레기 var에 $ 갤러리 = $ ( "#gallery")입니다 $ 휴지통 = $ ( "#trash"); // {(앨범 항목을 드래그 $ ( "리", $ 갤러리) .draggable 확인 취소 : // 때 배치되지 않은, 항목이 원래의 위치 봉쇄로 다시 돌아 간다 "무효": "a.ui-아이콘을", // 되돌아 드래그 시작되지 않는 아이콘을 클릭 "문서를" 도우미 : "복제" 커서 : "이동" }); 휴지통 배치 할 수 있습니다 보자 // {(앨범 항목 $의 trash.droppable 허용 동의 : "#gallery> 리를" activeClass "UI 상태 강조 표시" 드롭 : 함수 (이벤트, UI)를 { deleteImage (ui.draggable); } }); 앨범을 배치 할 수 있는지 확인 // {(휴지통 항목 $의 gallery.droppable 허용 동의 : "#trash 리를" activeClass : "사용자 정의 상태 활성" 드롭 : 함수 (이벤트, UI)를 { recycleImage (ui.draggable); } }); // 이미지 기능 var에 recycle_icon을 삭제 = "<A HREF = '링크 / / 재활용 / 스크립트 / 때 / 우리는 / 유무 / JS / 오프'제목 = '복원 된 이미지'클래스 = 'UI-아이콘 UI를-아이콘 새로 고침' > "이미지 </a>를 복원; 기능 deleteImage ($ 항목) { $ Item.fadeOut (함수 () { var에 $ 목록 = $ ( "UL", $ 쓰레기) .length? $ ( "UL", $ 쓰레기) : $ ( "<UL 클래스 = '갤러리 UI 헬퍼 리셋'/>") .appendTo ($ 쓰레기); $ Item.find ( "a.ui-아이콘 - 쓰레기") .remove (); $ Item.append (recycle_icon) .appendTo ($ 목록) .fadeIn (함수 () { $ 항목 .animate ({폭 : "48px"}) .find ( "IMG") .animate ({높이 : "36 x 36 픽셀의"}); }); }); } // 이미지 var에 trash_icon 복원 = "<A HREF = '링크 / / 휴지통 / 스크립트 / / 우리 / 유무 / JS / 오프에'제목 = 클래스 = 'UI-아이콘 UI를-아이콘 - 쓰레기'를 '이미지 제거' > "이미지 </a>를 삭제; 기능 recycleImage ($ 항목) { $ Item.fadeOut (함수 () { $ 항목 .find ( "a.ui-아이콘 새로 고침") .remove () .END () .CSS ( "폭", "96px") 으로 .Append (trash_icon) .find ( "IMG") .CSS ( "높이", "72px") .END () .appendTo ($ 갤러리) .fadeIn (); }); } // 이미지 미리보기 기능, 데모 ui.dialog 모달 창 기능 viewLargerImage로 사용 ($ 링크) { VAR SRC = $의 link.attr ( "HREF"), 제목 = $ link.siblings ( "IMG") .attr ( "고도"), $ 모달 = $ ( "IMG [SRC $ = '"+ SRC + "']"); 경우 ($의 modal.length) { $ Modal.dialog ( "오픈"); } 그밖에 { VAR IMG = $ ( "<IMG 고도 = '"+ 제목 + "'폭 = '384'높이 = '288'스타일 = '표시 : 없음; 패딩 : 8px;'/>") .attr ( "SRC"SRC) .appendTo ( "몸"); 에서는 setTimeout (함수 () { img.dialog ({ 제목 : 제목, 폭 : 400, 모달 : 사실 }); } 1); } } 이벤트 .click (함수 (이벤트를 통해 // 프록시 아이콘 해결 행동 $ ( "ul.gallery> 리")) { var에 $ 항목 = $ (이) $ 대상 = $ (event.target); 경우 ($ target.is ( "a.ui-아이콘 - 쓰레기")) { deleteImage ($ 항목); } 그렇지 경우 ($ target.is ( "a.ui-아이콘 - zoomin")) { viewLargerImage ($ 대상); } 그렇지 경우 ($ target.is ( "a.ui-아이콘 새로 고침")) { recycleImage ($ 항목); } false를 반환; }); }); </ 스크립트> </ 헤드> <바디> <사업부 클래스 = "UI - 위젯 UI 헬퍼 - clearfix"> <UL 아이디 = "갤러리"클래스 = "갤러리 UI 헬퍼 리셋 UI 헬퍼 - clearfix"> <리 클래스 = "UI 위젯 콘텐츠 UI 코너-TR"> <H5 클래스 = "UI 위젯 헤더"> 하이 타 트라 </ H5> <IMG SRC = "ko/ WP - 콘텐츠 / 업로드 / 2014/03 / high_tatras_min.jpg"고도 = "높은 Tatras 피크"너비 = "96"높이 = "72"> <a href="/ko/wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> 크게보기 </a>를 <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> 이미지 </a>을 삭제 </ 리> <리 클래스 = "UI 위젯 콘텐츠 UI 코너-TR"> <H5 클래스 = "UI 위젯 헤더"> 하이 타 트라 2 </ H5> <IMG SRC = "ko/ WP - 콘텐츠 / 업로드 / 2014/03 / high_tatras2_min.jpg"고도 = "그린 마운틴 호수 오두막"너비 = "96"높이 = "72"> <a href="/ko/wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> 크게보기 </a>를 <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> 이미지 </a>을 삭제 </ 리> <리 클래스 = "UI 위젯 콘텐츠 UI 코너-TR"> <H5 클래스 = "UI 위젯 헤더"> 높은 Tatras 3 </ H5> <IMG SRC = "ko/ WP - 콘텐츠 / 업로드 / 2014/03 / high_tatras3_min.jpg"고도 = "등반 계획"너비 = "96"높이 = "72"> <a href="/ko/wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> 크게보기 </a>를 <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> 이미지 </a>을 삭제 </ 리> <리 클래스 = "UI 위젯 콘텐츠 UI 코너-TR"> <H5 클래스 = "UI 위젯 헤더"> 하이 타 트라 4 </ H5> <IMG SRC = 너비 = "96"높이 = "72", "Kozi의 kopka 상단의"고도 "/ 업로드 / 2014/03 / high_tatras4_min.jpg ko/ WP - 콘텐츠 '=> <a href="/ko/wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> 크게보기 </a>를 <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> 이미지 </a>을 삭제 </ 리> </ UL> <사업부 아이디 = "쓰레기"클래스 = "UI 위젯 콘텐츠 UI 상태 기본"> <H4 클래스 = "UI 위젯 헤더"> <= "UI-아이콘 UI를-아이콘 - 쓰레기"스팬 클래스> 휴지통 </ SPAN> 휴지통 </ H4> </ DIV> </ DIV> </ BODY> </ HTML>
낙하 할 유혹, 또는 활성화 될 때 낙하 할 (즉, 허용 드래그이 낙하 할에 위치) 때 낙하 할 모양을 변경하는 경우. 사용 hoverClass
또는 activeClass
각각 클래스를 지정하는 옵션을 선택합니다.
<! 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 {폭 : 90 픽셀, 높이 : 90 픽셀; 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px 10px 10px 0;} #droppable, #의 droppable2 {폭 : 120 픽셀, 높이 120 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px;} H3 {명확 : 왼쪽;} </ 스타일> <스크립트> $ (함수 () { $ ( "#draggable") .draggable (); {(.droppable $ ( "#droppable") hoverClass "UI 상태-가져가" 드롭 : 함수 (이벤트, UI)를 { $ (이) .addClass ( "UI 상태 강조 표시") .find ( "P") 중에서 ( "떨어졌다!"); } }); $ .draggable ( "# Draggable2") (); $ ( "# Droppable2") .droppable ({ 동의 : "#의 draggable2을" activeClass "UI 상태 기본" 드롭 : 함수 (이벤트, UI)를 { $ (이) .addClass ( "UI 상태 강조 표시") .find ( "P") 중에서 ( "떨어졌다!"); } }); }); </ 스크립트> </ 헤드> <바디> <H3> 낙하 할 유혹 할 때 때 피드백 : </ H3> <사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠"> <P> 대상에 저를 끌어하시기 바랍니다 </ P> </ DIV> <사업부 아이디 = "낙하 할"클래스 = "UI 위젯 헤더"> <P> 여기에 넣어주세요 </ P> </ DIV> <H3> 드래그 피드백을 활성화 할 때 : </ H3> <사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠"> <P> 대상에 저를 끌어하시기 바랍니다 </ P> </ DIV> <사업부 아이디 = "droppable2"클래스 = "UI 위젯 헤더"> <P> 여기에 넣어주세요 </ P> </ DIV> </ BODY> </ HTML>