JqueryUI-삭제 가능

jQueryUI는 droppable() DOM 요소를 지정된 대상 (드래그 가능한 요소의 대상)에 놓을 수 있도록 만드는 메서드입니다.

통사론

그만큼 droppable() 방법은 두 가지 형태로 사용될 수 있습니다-

  • $ (selector, context) .droppable (options) 메서드

  • $ (selector, context) .droppable ( "action", params) 메서드

$ (선택기, 컨텍스트) .droppable (옵션) 메서드

낙하 할 (옵션) 메서드는 HTML 요소가 다른 요소를 드롭 할 수있는 요소로 사용될 수 있음을 선언합니다. 옵션이 포함 된 요소의 동작을 지정하는 객체입니다 매개 변수입니다.

통사론

$(selector, context).droppable (options);

Javascript 객체를 사용하여 한 번에 하나 이상의 옵션을 제공 할 수 있습니다. 제공 할 옵션이 두 개 이상인 경우 다음과 같이 쉼표를 사용하여 구분합니다.

$(selector, context).droppable({option1: value1, option2: value2..... });

다음 표는 이 방법과 함께 사용할 수있는 다양한 옵션 을 나열합니다.

Sr. 아니. 옵션 및 설명
1 동의하기
이 옵션은 놓기를 허용 할 드래그 가능한 요소를 제어해야 할 때 사용됩니다. 기본적으로 값은 *.

Option - accept

이 옵션은 놓기를 허용 할 드래그 가능한 요소를 제어해야 할 때 사용됩니다. 기본적으로 값은* 모든 항목이 droppable에 의해 승인된다는 것을 의미합니다.

이것은 유형이 될 수 있습니다-

  • Selector −이 유형은 어떤 드래그 가능한 요소가 허용되는지를 나타냅니다.

  • Function− 페이지의 드래그 가능한 각 요소에 대해 콜백 함수가 호출됩니다. 드래그 가능한 요소가 droppable에서 허용되면 이 함수는 true 를 반환해야합니다 .

Syntax

$( ".selector" ).droppable(
   { accept: ".special" }
);
2 activeClass

이 옵션은 허용 된 요소 ( options.accept에 표시된 요소 중 하나 )가 드래그 될 때 놓을 수있는 요소에 추가 할 하나 이상의 CSS 클래스를 나타내는 문자열 입니다. 기본적으로 값은false.

Option - activeClass

이 옵션은 허용 된 요소 ( options.accept에 표시된 요소 중 하나 )가 드래그 될 때 놓을 수있는 요소에 추가 할 하나 이상의 CSS 클래스를 나타내는 문자열 입니다. 기본적으로 값은false.

Syntax

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
삼 addClasses

이 옵션을 false로 설정 하면 ui-droppable 클래스가 droppable 요소에 추가되지 않습니다. 기본적으로 값은true.

Option - addClasses

이 옵션을 false로 설정 하면 ui-droppable 클래스가 droppable 요소에 추가되지 않습니다. 기본적으로 값은true. 이는 수백 개의 요소에서 .droppable () init를 호출 할 때 성능 최적화로 필요할 수 있습니다 .

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 장애인

이 옵션을 true로 설정 하면 droppable이 비활성화됩니다. 기본적으로 값은false.

Option - disabled

이 옵션을 true로 설정 하면 droppable이 비활성화됩니다. 즉, 지정된 요소 위로 항목 이동 및 해당 요소로의 드롭을 비활성화합니다. 기본적으로 값은false.

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5 탐욕스러운

이 옵션은 중첩 된 드롭 가능 항목에 놓기 위해 허용 할 드래그 가능 요소를 제어해야 할 때 사용됩니다. 기본적으로 값은false. 이 옵션이 true 로 설정되면 상위 droppables는 요소를 수신하지 않습니다.

Option - greedy

이 옵션은 중첩 된 드롭 가능 항목에 놓기 위해 허용 할 드래그 가능 요소를 제어해야 할 때 사용됩니다. 기본적으로 값은false. 이 옵션이 true 로 설정되면 상위 droppables는 요소를 수신하지 않습니다.

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6 hoverClass

이 옵션은 허용 된 요소 ( options.accept에 표시된 요소 )가 이동할 때 droppable 요소에 추가 될 하나 이상의 CSS 클래스를 나타내는 문자열 입니다. 기본적으로 값은false.

Option - hoverClass

이 옵션은 허용 된 요소 ( options.accept에 표시된 요소 )가 이동할 때 droppable 요소에 추가 될 하나 이상의 CSS 클래스를 나타내는 문자열 입니다. 기본적으로 값은false.

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
7 범위

이 옵션은 동일한 options.scope (드래그 가능 (옵션)에 정의 됨) 를 가진 항목으로 만 드래그 가능한 요소의 놓기 가능한 작업을 제한하는 데 사용됩니다 . 기본적으로 값은"default".

Option - scope

이 옵션은 동일한 options.scope (드래그 가능 (옵션)에 정의 됨) 를 가진 항목으로 만 드래그 가능한 요소의 놓기 가능한 작업을 제한하는 데 사용됩니다 . 기본적으로 값은"default".

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
8 공차

이 옵션은 드래그 가능한 항목이 드롭 가능한 항목 위에 있는지 여부를 테스트하는 데 사용할 모드를 지정 하는 문자열 입니다. 기본적으로 값은"intersect".

Option - tolerance

이 옵션은 드래그 가능한 요소가 허용되는 드롭에 대해 드롭 가능한 요소를 덮는 방법을 지정하는 문자열 입니다. 기본적으로 값은"intersect". 가능한 값은-

  • fit − Draggable은 드롭 가능한 요소를 전체적으로 덮습니다.

  • intersect − Draggable은 드롭 가능한 요소와 양방향으로 최소 50 % 겹칩니다.

  • pointer − 마우스 포인터가 놓을 수있는 요소와 겹칩니다.

  • touch − Draggable은 드롭 가능한 터치와 겹칩니다.

Syntax

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

다음 섹션에서는 놓기 기능의 몇 가지 작동 예를 보여줍니다.

기본 기능

다음 예제는 놓기 가능한 기능의 간단한 예제를 보여줍니다. droppable() 방법.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dropexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력이 표시됩니다. 이제 결과를 가지고 놀 수 있습니다.

addClass 사용, 비활성화 및 허용 오차

다음 예제는 세 가지 옵션의 사용법을 보여줍니다. (a) addClass (b) disabled 과 (c) tolerance JqueryUI의 드롭 기능에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dropexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력이 표시됩니다. 이제 결과를 가지고 놀 수 있습니다.

이제 "Tolerance Touch!"에 요소를 놓습니다. 상자 (이 상자의 가장자리를 터치)하고 대상 요소의 변경 사항을 확인합니다. 이제 "Tolerance Fit!"에 요소를 드롭합니다. 대상에서 드래그 할 수있는 요소는 대상 요소 (예 : "Tolerance Fit!")와 완전히 겹쳐 야합니다. 표적.

놓을 요소 선택

다음 예제는 옵션 사용을 보여줍니다. accept 과 scope JqueryUI의 드래그 기능에서 옵션.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
				
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
         
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dropexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력이 표시됩니다. 이제 출력으로 재생할 수 있습니다.

여기에서 "일본에서 온 사람"요소를 "일본"대상에만 드롭하고 "인도에서 온 사람"요소를 대상 인도에 놓을 수 있습니다. 유사하게 "자바를 배우고 싶은 사람"의 범위를 "자바"로 설정하고 "봄을 배우고 싶은 사람"을 "봄의 목표"로 설정합니다.

외모 관리

다음 예제는 옵션 사용을 보여줍니다. activeClass 과 hoverClass 모양을 관리하는 데 도움이되는 JqueryUI 클래스입니다.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dropexample.htm javascript를 지원하는 표준 브라우저에서 열면 다음과 같은 출력이 표시됩니다.

"Drag me to my target"요소를 드래그하거나 마우스 오버하면 (대상 위로) 대상 요소 "Drop here"의 색상이 변경됩니다.

$ (selector, context) .droppable ( "action", params) 메서드

낙하 할 ( "액션"PARAMS) 방법은 낙하 할 방지 기능 등 낙하 할 요소에서 동작을 수행 할 수있다. 액션은 첫 번째 인수의 문자열로 지정됩니다 (예 : 삭제를 방지하려면 "disable"). 다음 표에서 전달할 수있는 조치를 확인하십시오.

통사론

$(selector, context).droppable ("action", params);;

다음 표는 이 방법과 함께 사용할 수있는 다양한 작업 을 나열합니다.

Sr. 아니. 액션 및 설명
1 멸하다

이 작업은 요소의 놓기 가능한 기능을 완전히 파괴합니다. 요소는 초기화 이전 상태로 돌아갑니다.

Action - destroy

이 작업은 요소의 놓기 가능한 기능을 완전히 파괴합니다. 요소는 초기화 이전 상태로 돌아갑니다.

Syntax

$( ".selector" ).droppable("destroy");
2 비활성화

이 작업은 놓기 가능한 작업을 비활성화합니다. 요소는 더 이상 놓을 수있는 요소가 아닙니다. 이 메서드는 인수를 허용하지 않습니다.

Action - disable

이 작업은 놓기 가능한 작업을 비활성화합니다. 요소는 더 이상 놓을 수있는 요소가 아닙니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$( ".selector" ).droppable("disable");
삼 활성화

이 작업은 놓기 가능한 작업을 다시 활성화합니다. 요소는 다시 놓을 수있는 요소를받을 수 있습니다. 이 메서드는 인수를 허용하지 않습니다.

Action - enable

이 작업은 놓기 가능한 작업을 다시 활성화합니다. 요소는 다시 놓을 수있는 요소를받을 수 있습니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$( ".selector" ).droppable("enable");
4 선택권

이 작업은 현재 놓기 가능한 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 객체를 가져옵니다. 이 메서드는 인수를 허용하지 않습니다.

Action - option

이 작업은 현재 놓기 가능한 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 객체를 가져옵니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

var options = $( ".selector" ).droppable( "option" );
5 옵션 (optionName)

이 조치는 지정된 optionName 과 함께 현재 연관된 놓기 가능 요소의 값을 가져 옵니다 . 인수로 문자열 값을받습니다.

Action - option( optionName )

이 조치는 지정된 optionName 과 함께 현재 연관된 놓기 가능 요소의 값을 가져 옵니다 . 인수로 문자열 값을받습니다.

Syntax

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6 옵션 (optionName, value)

이 조치는 지정된 optionName 과 연관된 놓기 가능한 옵션의 값을 설정합니다 .

Action - option( optionName, value )

이 조치는 지정된 optionName 과 연관된 놓기 가능한 옵션의 값을 설정합니다 . optionName 인수 는 설정할 옵션의 이름이고 value 는 옵션에 대해 설정할 값 입니다.

Syntax

$( ".selector" ).droppable( "option", "disabled", true );
7 옵션 (옵션)

이 작업은 놓기 가능 항목에 대해 하나 이상의 옵션을 설정합니다. 인수 옵션은 옵션 값 쌍의 맵을 설정하는 것입니다.

Action - option( options )

이 작업은 놓기 가능 항목에 대해 하나 이상의 옵션을 설정합니다. 인수 옵션은 옵션 값 쌍의 맵을 설정하는 것입니다.

Syntax

$( ".selector" ).droppable( "option", { disabled: true } );
8 위젯

이 작업은 놓을 수있는 요소를 포함하는 jQuery 객체를 반환합니다. 이 메서드는 인수를 허용하지 않습니다.

이 작업은 놓을 수있는 요소를 포함하는 jQuery 객체를 반환합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

var widget = $( ".selector" ).droppable( "widget" );

예

이제 위 표의 작업을 사용한 예를 살펴 보겠습니다. 다음 예제는 destroy () 메소드 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dropexample.htm javascript를 지원하는 표준 브라우저에서 열면 다음과 같은 출력이 표시됩니다.

"drop here"라는 이름의 요소에 "drag1"을 놓으면이 요소가 삭제되고이 작업은 요소의 놓을 수있는 기능을 완전히 파괴합니다. 이 요소에 "drag2"및 "drag3"을 다시 놓을 수 없습니다.

놓을 수있는 요소에 대한 이벤트 관리

이전 섹션에서 본 droppable (옵션) 메소드 외에도 JqueryUI는 특정 이벤트에 대해 트리거되는 이벤트 메소드를 제공합니다. 이러한 이벤트 방법은 다음과 같습니다.

Sr. 아니. 이벤트 방법 및 설명
1 활성화 (이벤트, UI)

이 이벤트는 허용 된 드래그 가능한 요소가 드래그를 시작할 때 트리거됩니다. 이것은 놓을 수있을 때 놓을 수있는 "조명"을 만들고자 할 때 유용 할 수 있습니다.

Event - activate(event, ui)

이 이벤트는 허용 된 드래그 가능한 요소가 드래그를 시작할 때 트리거됩니다. 이것은 놓을 수있을 때 놓을 수있는 "조명"을 만들고자 할 때 유용 할 수 있습니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값은 다음과 같습니다.

  • draggable − 드래그 가능한 요소를 나타내는 jQuery 객체.

  • helper − 끌고있는 도우미를 나타내는 jQuery 객체.

  • position − 드래그 가능한 도우미의 현재 CSS 위치는 {top, left} 객체입니다.

  • offset − 드래그 가능한 도우미의 현재 오프셋 위치는 {top, left} 객체입니다.

Syntax

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
2 생성 (이벤트, UI)

이 이벤트는 놓기 가능한 요소가 생성 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - create(event, ui)

이 이벤트는 놓기 가능한 요소가 생성 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
삼 비활성화 (이벤트, UI)

이 이벤트는 허용 된 드래그 가능 항목이 드래그를 중지 할 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - deactivate(event, ui)

이 이벤트는 허용 된 드래그 가능 항목이 드래그를 중지 할 때 트리거됩니다. 어디 이벤트는 타입입니다 이벤트 및 UI는 타입이다 오브젝트 가능한 유형은 -

  • draggable − 드래그 가능한 요소를 나타내는 jQuery 객체.

  • helper − 끌고있는 도우미를 나타내는 jQuery 객체.

  • position − 드래그 가능한 도우미의 현재 CSS 위치는 {top, left} 객체입니다.

  • offset − 드래그 가능한 도우미의 현재 오프셋 위치는 {top, left} 객체입니다.

Syntax

$(".selector").droppable(
   deactivate: function(event, ui) {}
);
4 드롭 (이벤트, UI)

이 작업은 요소가 droppable에 드롭 될 때 트리거됩니다. 이것은 공차 옵션을 기반으로합니다 . 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - drop(event, ui)

이 작업은 요소가 droppable에 드롭 될 때 트리거됩니다. 이것은 공차 옵션을 기반으로합니다 . 어디 이벤트는 타입입니다 이벤트 및 UI는 타입이다 오브젝트 가능한 유형은 -

  • draggable − 드래그 가능한 요소를 나타내는 jQuery 객체.

  • helper − 끌고있는 도우미를 나타내는 jQuery 객체.

  • position − 드래그 가능한 도우미의 현재 CSS 위치는 {top, left} 객체입니다.

  • offset − 드래그 가능한 도우미의 현재 오프셋 위치는 {top, left} 객체입니다.

Syntax

$(".selector").droppable(
   drop: function(event, ui) {}
);
5 out (이벤트, UI)

이 이벤트는 허용 된 드래그 가능한 요소가 드롭 가능한 외부로 드래그 될 때 트리거됩니다. 이것은 공차 옵션을 기반으로합니다 . 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - out(event, ui)

허용 된 드래그 가능한 요소가 드롭 가능한 외부로 드래그되면 Thi 이벤트가 트리거됩니다. 이것은 공차 옵션을 기반으로합니다 . 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$(".selector").droppable(
   out: function(event, ui) {}
);
6 오버 (이벤트, UI)

이 이벤트는 허용 된 드래그 가능 요소를 드롭 가능 위로 드래그 할 때 트리거됩니다. 이것은 공차 옵션을 기반으로합니다 . 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - over(event, ui)

이 이벤트는 허용 된 드래그 가능 요소를 드롭 가능 위로 드래그 할 때 트리거됩니다. 이것은 공차 옵션을 기반으로합니다 . 어디 이벤트는 타입입니다 이벤트 및 UI는 타입이다 오브젝트 .and 가능한 유형은 -

  • draggable − 드래그 가능한 요소를 나타내는 jQuery 객체.

  • helper − 끌고있는 도우미를 나타내는 jQuery 객체.

  • position − 드래그 가능한 도우미의 현재 CSS 위치는 {top, left} 객체입니다.

  • offset − 드래그 가능한 도우미의 현재 오프셋 위치는 {top, left} 객체입니다.

Syntax

$(".selector").droppable(
   over: function(event, ui) {}
);

예

다음 예제는 드롭 기능 중 이벤트 메소드 사용을 보여줍니다. 이 예제는 이벤트 drop , over 및 out 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
					
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dropexample.htm javascript를 지원하는 표준 브라우저에서 열면 다음과 같은 출력이 표시됩니다.

여기에서 요소를 드래그 할 때 놓을 수있는 요소의 메시지가 어떻게 변경되는지 확인할 수 있습니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved