jQuery UI - 可放置物件

上一頁
下一頁

jQuery UI 提供了 `droppable()` 方法，可以使任何 DOM 元素在指定的 target（可拖動元素的目標）處成為可放置物件。

語法

`droppable()` 方法可以兩種形式使用：

$(selector, context).droppable (options) 方法

`droppable (options)` 方法宣告一個 HTML 元素可以用作可以將其他元素拖放到其中的元素。`options` 引數是一個物件，用於指定所涉及元素的行為。

語法

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

您可以使用 JavaScript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔，如下所示：

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

下表列出了可與此方法一起使用的不同`options`：

序號 選項及描述
1 accept
此選項用於控制要接受哪些可拖動元素進行放置。預設值為`*`。

選項 - accept

此選項用於控制要接受哪些可拖動元素進行放置。預設值為`*`，表示接受所有專案。

此選項可以是以下型別：

  • `選擇器` - 此型別指示接受哪些可拖動元素。

  • `函式` - 將為頁面上的每個可拖動元素呼叫回撥函式。如果可放置物件接受可拖動元素，則此函式應返回`true`。

語法

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

此選項是一個字串，表示當接受的元素（`options.accept` 中指示的元素之一）正在拖動時要新增到可放置元素的一個或多個 CSS 類。預設值為`false`。

選項 - activeClass

此選項是一個字串，表示當接受的元素（`options.accept` 中指示的元素之一）正在拖動時要新增到可放置元素的一個或多個 CSS 類。預設值為`false`。

語法

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

如果將此選項設定為`false`，則會阻止將`ui-droppable` 類新增到可放置元素。預設值為`true`。

選項 - addClasses

如果將此選項設定為`false`，則會阻止將`ui-droppable` 類新增到可放置元素。預設值為`true`。當對數百個元素呼叫`.droppable()` 初始化時，這可能需要作為效能最佳化。

語法

$( ".selector" ).droppable(
   { addClasses: false }
);
4 disabled

如果將此選項設定為`true`，則會停用可放置物件。預設值為`false`。

選項 - disabled

如果將此選項設定為`true`，則會停用可放置物件，即停用專案在指定元素上的移動以及將其拖放到這些元素中。預設值為`false`。

語法

$( ".selector" ).droppable(
   { disabled: true }
);
5 greedy

此選項用於控制在巢狀的可放置物件上要接受哪些可拖動元素進行放置。預設值為`false`。如果將此選項設定為`true`，則任何父可放置物件都不會接收元素。

選項 - greedy

此選項用於控制在巢狀的可放置物件上要接受哪些可拖動元素進行放置。預設值為`false`。如果將此選項設定為`true`，則任何父可放置物件都不會接收元素。

語法

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

此選項是`字串`，表示當接受的元素（`options.accept` 中指示的元素）移入可放置元素時要新增到該元素的一個或多個 CSS 類。預設值為`false`。

選項 - hoverClass

此選項是`字串`，表示當接受的元素（`options.accept` 中指示的元素）移入可放置元素時要新增到該元素的一個或多個 CSS 類。預設值為`false`。

語法

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

此選項用於將可拖動元素的可放置操作限制為僅具有相同`options.scope`（在 `draggable (options)` 中定義）的專案。預設值為`"default"`。

選項 - scope

此選項用於將可拖動元素的可放置操作限制為僅具有相同`options.scope`（在 `draggable (options)` 中定義）的專案。預設值為`"default"`。

語法

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

此選項是一個`字串`，用於指定用於測試可拖動物件是否懸停在可放置物件上的模式。預設值為`"intersect"`。

選項 - tolerance

此選項是一個`字串`，用於指定可拖動元素應如何覆蓋可放置元素才能接受放置。預設值為`"intersect"`。可能的值為：

  • `fit` - 可拖動元素完全覆蓋可放置元素。

  • `intersect` - 可拖動元素在兩個方向上至少重疊可放置元素 50%。

  • `pointer` - 滑鼠指標重疊可放置元素。

  • `touch` - 可拖動元素與可放置元素有任何接觸。

語法

$( ".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>

讓我們將上述程式碼儲存在一個名為`dropexample.htm` 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

使用 addClass、disabled 和 tolerance

以下示例演示了在 jQuery UI 的放置函式中使用三個選項`(a) addClass (b) disabled` 和`(c) tolerance`。

<!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>

讓我們將上述程式碼儲存在一個名為`dropexample.htm` 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

現在將元素放置在“Tolerance Touch！”框上（只需接觸此框的邊緣），然後檢視目標元素的變化。現在要將元素放置在“Tolerance Fit！”目標上，可拖動元素必須完全重疊目標元素，即“Tolerance Fit！”目標。

選擇要放置的元素

以下示例演示了在 jQuery UI 的拖動函式中使用`accept` 選項和`scope` 選項。

<!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>

讓我們將上述程式碼儲存在一個名為`dropexample.htm` 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用輸出：

在這裡您可以看到，您只能將“People from Japan”元素放置在“Japan”目標上，將“People from India”元素放置在“India”目標上。類似地，“People who want to learn Java”的範圍設定為“Java”目標，“People who want to learn Spring”的範圍設定為“Spring”目標。

管理外觀

以下示例演示了 jQuery UI 類的`activeClass` 和`hoverClass` 選項的使用，這些選項有助於我們管理外觀。

<!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>

讓我們將上述程式碼儲存在一個名為`dropexample.htm` 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您應該會看到以下輸出：

您可以注意到，當拖動或懸停（在目標上）“Drag me to my target”元素時，會更改目標元素“Drop here”的顏色。

$(selector, context).droppable ("action", params) 方法

`droppable ("action", params)` 方法可以在可放置元素上執行操作，例如阻止可放置功能。操作在第一個引數中指定為字串（例如，將“disable”用於阻止放置）。請查看下錶中可以傳遞的操作。

語法

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

下表列出了可與此方法一起使用的不同`actions`：

序號 操作及描述
1 destroy

此操作會完全銷燬元素的可放置功能。元素將恢復到其初始化前的狀態。

操作 - destroy

此操作會完全銷燬元素的可放置功能。元素將恢復到其初始化前的狀態。

語法

$( ".selector" ).droppable("destroy");
2 disable

此操作會停用可放置操作。元素不再是可放置元素。此方法不接受任何引數。

操作 - disable

此操作會停用可放置操作。元素不再是可放置元素。此方法不接受任何引數。

語法

$( ".selector" ).droppable("disable");
3 enable

此操作會重新啟用可放置操作。元素可以再次接收可放置元素。此方法不接受任何引數。

操作 - enable

此操作會重新啟用可放置操作。元素可以再次接收可放置元素。此方法不接受任何引數。

語法

$( ".selector" ).droppable("enable");
4 option

此操作獲取一個物件，其中包含表示當前可放置選項雜湊的鍵/值對。

操作 - option

此操作獲取一個物件，其中包含表示當前可放置選項雜湊的鍵/值對。

語法

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

此操作獲取當前與指定的`optionName`關聯的可放置元素的值。此操作接受一個字串值作為引數。

操作 - option( optionName )

此操作獲取當前與指定的`optionName`關聯的可放置元素的值。此操作接受一個字串值作為引數。

語法

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

此操作設定與指定的`optionName`關聯的可放置選項的值。

操作 - option( optionName, value )

此操作設定與指定的`optionName`關聯的可放置選項的值。引數`optionName`是要設定的選項的名稱，`value`是要為選項設定的值。

語法

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

此操作為可放置物件設定一個或多個選項。引數`options`是要設定的選項-值對的對映。

操作 - option( options )

此操作為可放置物件設定一個或多個選項。引數`options`是要設定的選項-值對的對映。

語法

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

此操作返回一個包含可放置元素的 jQuery 物件。此方法不接受任何引數。

此操作返回一個包含可放置元素的 jQuery 物件。此方法不接受任何引數。

語法

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>

讓我們將上述程式碼儲存在一個名為`dropexample.htm` 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您應該會看到以下輸出：

如果您將“drag1”放置在名為“drop here”的任何元素上，您會注意到此元素被放置，此操作會完全銷燬元素的可放置功能。您不能再次將“drag2”和“drag3”放置在此元素上。

可放置元素上的事件管理

除了我們在上一節中看到的 `droppable (options)` 方法外，jQuery UI 還提供了在特定事件觸發時觸發的事件方法。這些事件方法列在下面：

序號 事件方法及描述
1 activate(event, ui)

當接受的可拖動元素開始拖動時，會觸發此事件。如果您想在可以將元素放置到可放置物件時使其“亮起”，這將非常有用。

事件 - activate(event, ui)

當接受的可拖動元素開始拖動時，會觸發此事件。如果您想在可以將元素放置到可放置物件時使其“亮起”，這將非常有用。其中`event` 的型別為`Event`，`ui` 的型別為`Object`。`ui` 的可能值為：

  • `draggable` - 表示可拖動元素的 jQuery 物件。

  • `helper` - 表示正在拖動的輔助物件的 jQuery 物件。

  • `position` - 可拖動輔助物件的當前 CSS 位置，作為 { top, left } 物件。

  • `offset` - 可拖動輔助物件的當前偏移位置，作為 { top, left } 物件。

語法

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
2 create(event, ui)

建立可放置元素時會觸發此事件。其中`event` 的型別為`Event`，`ui` 的型別為`Object`。

事件 - create(event, ui)

建立可放置元素時會觸發此事件。其中`event` 的型別為`Event`，`ui` 的型別為`Object`。

語法

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
3 deactivate(event, ui)

當接受的可拖動元素停止拖動時，會觸發此事件。其中`event` 的型別為`Event`，`ui` 的型別為`Object`。

事件 - deactivate(event, ui)

當接受的可拖動元素停止拖動時，會觸發此事件。其中`event` 的型別為`Event`，`ui` 的型別為`Object`，可能的型別為：

  • `draggable` - 表示可拖動元素的 jQuery 物件。

  • `helper` - 表示正在拖動的輔助物件的 jQuery 物件。

  • `position` - 可拖動輔助物件的當前 CSS 位置，作為 { top, left } 物件。

  • `offset` - 可拖動輔助物件的當前偏移位置，作為 { top, left } 物件。

語法

$(".selector").droppable(
   deactivate: function(event, ui) {}
);
4 drop(event, ui)

當元素放置到可放置物件上時，會觸發此操作。這基於`tolerance` 選項。其中`event` 的型別為`Event`，`ui` 的型別為`Object`。

事件 - drop(event, ui)

當元素被拖放到可放置區域時，將觸發此操作。這基於tolerance選項。其中event的型別為Event，ui的型別為Object，可能的型別包括：

  • `draggable` - 表示可拖動元素的 jQuery 物件。

  • `helper` - 表示正在拖動的輔助物件的 jQuery 物件。

  • `position` - 可拖動輔助物件的當前 CSS 位置，作為 { top, left } 物件。

  • `offset` - 可拖動輔助物件的當前偏移位置，作為 { top, left } 物件。

語法

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

當已接受的可拖動元素從可放置區域拖出時，將觸發此事件。這基於tolerance選項。其中event的型別為Event，ui的型別為Object。

事件 - out(event, ui)

當已接受的可拖動元素從可放置區域拖出時，將觸發此事件。這基於tolerance選項。其中event的型別為Event，ui的型別為Object。

語法

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

當已接受的可拖動元素拖過可放置區域時，將觸發此事件。這基於tolerance選項。其中event的型別為Event，ui的型別為Object。

事件 - over(event, ui)

當已接受的可拖動元素拖過可放置區域時，將觸發此事件。這基於tolerance選項。其中event的型別為Event，ui的型別為Object，可能的型別包括：

  • `draggable` - 表示可拖動元素的 jQuery 物件。

  • `helper` - 表示正在拖動的輔助物件的 jQuery 物件。

  • `position` - 可拖動輔助物件的當前 CSS 位置，作為 { top, left } 物件。

  • `offset` - 可拖動輔助物件的當前偏移位置，作為 { top, left } 物件。

語法

$(".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>

讓我們將上述程式碼儲存在一個名為`dropexample.htm` 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您應該會看到以下輸出：

您會注意到，當您拖動元素時，可放置元素中的訊息是如何變化的。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.