Latest web development tutorials

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 {폭 : 100 픽셀, 높이 100 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px 10px 10px 0;}
  #droppable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em; 플로트 : 왼쪽, 여백 : 10px;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "#draggable") .draggable ();
    {(.droppable $ ( "#droppable")
      드롭 : 함수 (이벤트, UI)를 {
        $ (이)
          .addClass ( "UI 상태 강조 표시")
          .find ( "P")
            .html 중에서 ( "떨어졌다!");
      }
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 아이디 = "드래그"클래스 = "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")
            .html 중에서 ( "떨어졌다!");
      }
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 아이디 = "드래그 - 잘못된 것으"클래스 = "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")
            .html 중에서 ( "떨어졌다!");
        false를 반환;
      }
    });
 
    $ ( "# Droppable2, #의 droppable2-내부") .droppable ({
      욕심 : 사실,
      activeClass "UI 상태-가져가"
      hoverClass "UI 상태 활성"
      드롭 : 함수 (이벤트, UI)를 {
        $ (이)
          .addClass ( "UI 상태 강조 표시")
          .find ( "> P")
            .html 중에서 ( "떨어졌다!");
      }
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 아이디 = "드래그"클래스 = "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")
            .html 중에서 ( "배치!");
      }
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 아이디 = "드래그"클래스 = "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 = "../ WP - 콘텐츠 / 업로드 / 2014/03 / high_tatras_min.jpg"고도 = "높은 Tatras 피크"너비 = "96"높이 = "72">
    <a href="../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 = "../ WP - 콘텐츠 / 업로드 / 2014/03 / high_tatras2_min.jpg"고도 = "그린 마운틴 호수 오두막"너비 = "96"높이 = "72">
    <a href="../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 = "../ WP - 콘텐츠 / 업로드 / 2014/03 / high_tatras3_min.jpg"고도 = "등반 계획"너비 = "96"높이 = "72">
    <a href="../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 ../ WP - 콘텐츠 '=>
    <a href="../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")
            .html 중에서 ( "떨어졌다!");
      }
    });
 
    $ .draggable ( "# Draggable2") ();
    $ ( "# Droppable2") .droppable ({
      동의 : "#의 draggable2을"
      activeClass "UI 상태 기본"
      드롭 : 함수 (이벤트, UI)를 {
        $ (이)
          .addClass ( "UI 상태 강조 표시")
          .find ( "P")
            .html 중에서 ( "떨어졌다!");
      }
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<H3> 낙하 할 유혹 할 때 때 피드백 : </ H3>
 
<사업부 아이디 = "드래그"클래스 = "UI 위젯 콘텐츠">
  <P> 대상에 저를 끌어하시기 바랍니다 </ P>
</ DIV>
 
<사업부 아이디 = "낙하 할"클래스 = "UI 위젯 헤더">
  <P> 여기에 넣어주세요 </ P>
</ DIV>
 
<H3> 드래그 피드백을 활성화 할 때 : </ H3>
 
<사업부 아이디 = "draggable2"클래스 = "UI 위젯 콘텐츠">
  <P> 대상에 저를 끌어하시기 바랍니다 </ P>
</ DIV>
 
<사업부 아이디 = "droppable2"클래스 = "UI 위젯 헤더">
  <P> 여기에 넣어주세요 </ P>
</ DIV>
 
 
</ BODY>
</ HTML>