JqueryUI - 可拖動

上一個
下一個

jQueryUI 提供了draggable() 方法來使任何 DOM 元素可拖動。一旦元素可拖動，您就可以透過用滑鼠單擊它並將其拖動到視口內的任何位置來移動該元素。

語法

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

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

draggable (options) 方法宣告 HTML 元素可以在 HTML 頁面中移動。options 引數是一個物件，用於指定所涉及元素的行為。

語法

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

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

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

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

序號 選項及描述
1 addClasses

如果將此選項設定為false，則會阻止ui-draggable 類新增到所選 DOM 元素列表中。預設值為true。

選項 - addClasses

如果將此選項設定為false，則會阻止ui-draggable 類新增到所選 DOM 元素列表中。預設值為true。

語法

$(".selector").draggable(
   { addClasses: false }
);
2 appendTo

指定在拖動過程中應將可拖動輔助元素附加到的元素。預設值為“parent”。

選項 - appendTo

指定在拖動過程中應將可拖動輔助元素附加到的元素。預設值為“parent”。

語法

$(".selector").draggable(
   { appendTo: "body"}
);
3 axis

此選項將拖動限制在水平 (x) 或垂直 (y) 軸上。可能的值：“x”、“y”。

選項 - axis

此選項將拖動限制在水平 (x) 或垂直 (y) 軸上。可能的值：“x”、“y”。

語法

$(".selector").draggable(
   { axis: "x" }
);
4 cancel

您可以使用此選項阻止從指定元素開始拖動。預設值為“input,textarea, button,select,option”。

選項 - cancel

您可以使用此選項阻止從指定元素開始拖動。預設值為“input,textarea, button,select,option”

語法

$(".selector").draggable(
   { cancel: ".title" }
);
5 connectToSortable

您可以使用此選項指定一個列表，其元素是可互換的。在放置結束時，該元素是列表的一部分。預設值為“false”。

選項 - connectToSortable

您可以使用此選項指定一個列表，其元素是可互換的。在放置結束時，該元素是列表的一部分。預設值為“false”。

語法

$(".selector").draggable(
   { connectToSortable: "#my-sortable" }
);
6 containment

將拖動限制在指定元素或區域的邊界內。預設值為“false”。

選項 - containment

將拖動限制在指定元素或區域的邊界內。預設值為“false”。

語法

$(".selector").draggable(
   { containment: "parent" }
);
7 cursor

指定元素移動時的游標 CSS 屬性。它表示滑鼠指標的形狀。預設值為“auto”。

選項 - cursor

指定元素移動時的游標 CSS 屬性。它表示滑鼠指標的形狀。預設值為“auto”。其他可能的值為：

  • "crosshair" (十字)
  • "default" (箭頭)
  • "pointer" (手)
  • "move" (兩個箭頭交叉)
  • "e-resize" (向右擴充套件)
  • "ne-resize" (向右上方擴充套件)
  • "nw-resize" (向左上方擴充套件)
  • "n-resize" (向上擴充套件)
  • "se-resize" (向右下方擴充套件)
  • "sw-resize" (向左下方擴充套件)
  • "s-resize" (向下擴充套件)
  • "auto" (預設)
  • "w-resize" (向左擴充套件)
  • "text" (寫文字的指標)
  • "wait" (沙漏)
  • "help" (幫助指標)

語法

$(".selector").draggable(
   { cursor: "crosshair" }
);
8 cursorAt

設定拖動輔助元素相對於滑鼠游標的偏移量。座標可以使用一個或兩個鍵的組合以雜湊形式給出：{ top, left, right, bottom }。預設值為“false”。

選項 - cursorAt

設定拖動輔助元素相對於滑鼠游標的偏移量。座標可以使用一個或兩個鍵的組合以雜湊形式給出：{ top, left, right, bottom }。預設值為“false”。

語法

$(".selector").draggable(
   $( ".selector" ).draggable({ cursorAt: { left: 5 } });
);
9 delay

延遲，以毫秒為單位，在此之後，滑鼠的第一次移動將被考慮在內。位移可能在此時間之後開始。預設值為“0”。

選項 - delay

延遲，以毫秒為單位，在此之後，滑鼠的第一次移動將被考慮在內。位移可能在此時間之後開始。預設值為“0”。

語法

$(".selector").draggable(
   { delay: 300 }
);
10 disabled

設定為 true 時，停用移動專案的功能。在啟用此函式（使用 draggable (“enable”) 指令）之前，無法移動專案。預設值為“false”。

選項 - disabled

設定為 true 時，停用移動專案的功能。在啟用此函式（使用 draggable (“enable”) 指令）之前，無法移動專案。預設值為“false”。

語法

$(".selector").draggable(
   { disabled: true }
);
11 distance

滑鼠必須移動的畫素數，然後才能考慮位移。預設值為“1”。

選項 - distance

滑鼠必須移動的畫素數，然後才能考慮位移。預設值為“false”。

語法

$(".selector").draggable(
   { distance: 10 }
);
12 grid

將拖動輔助元素捕捉到網格上，每 x 和 y 畫素。陣列必須為 [ x, y ] 形式。預設值為“false”。

選項 - grid

將拖動輔助元素捕捉到網格上，每 x 和 y 畫素。陣列必須為 [ x, y ] 形式。預設值為“false”。

語法

$(".selector").draggable(
   { grid: [ 50, 20 ] }
);
13 handle

如果指定，則限制拖動從開始，除非 mousedown 發生在指定的元素上。預設值為“false”。

選項 - handle

如果指定，則限制拖動從開始，除非 mousedown 發生在指定的元素上。預設值為“false”。

語法

$(".selector").draggable(
   { handle: "h2" }
);
14 helper

允許使用輔助元素進行拖動顯示。預設值為“original”。

選項 - helper

允許使用輔助元素進行拖動顯示。預設值為“original”。

語法

$(".selector").draggable(
   { helper: "clone" }
);
15 iframeFix

防止 iframe 在拖動期間捕獲 mousemove 事件。預設值為“false”。

選項 - iframeFix

防止 iframe 在拖動期間捕獲 mousemove 事件。預設值為“false”。

語法

$(".selector").draggable(
   { iframeFix: true }
);
16 opacity

移動時移動元素的不透明度。預設值為“false”。

選項 - opacity

移動時移動元素的不透明度。預設值為“false”。

語法

$(".selector").draggable(
   {  opacity: 0.35 }
);
17 refreshPositions

如果設定為true，則所有可放置位置都將在每次 mousemove 時計算。預設值為“false”。

選項 - refreshPositions

如果設定為true，則所有可放置位置都將在每次 mousemove 時計算。預設值為“false”。

語法

$(".selector").draggable(
   { refreshPositions: true }
);
18 revert

指示在移動結束時是否將元素移回其原始位置。預設值為“false”。

選項 - revert

指示在移動結束時是否將元素移回其原始位置。預設值為“false”。

語法

$(".selector").draggable(
   { revert: true }
);
19 revertDuration

位移的持續時間（以毫秒為單位），在此之後元素返回其原始位置（參見 options.revert）。預設值為“500”。

選項 - revertDuration

位移的持續時間（以毫秒為單位），在此之後元素返回其原始位置（參見 options.revert）。預設值為“500”。

語法

$(".selector").draggable(
   { revertDuration: 200 }
);
20 scope

除了 droppable 的 accept 選項之外，還用於對可拖動和可放置專案的集合進行分組。預設值為“default”。

選項 - scope

除了 droppable 的 accept 選項之外，還用於對可拖動和可放置專案的集合進行分組。預設值為“default”。

語法

$(".selector").draggable(
   { scope: "tasks" }
);
21 scroll

設定為true（預設值）時，如果專案移動到視窗的可視區域之外，則顯示將滾動。預設值為“true”。

選項 - scroll

設定為true（預設值）時，如果專案移動到視窗的可視區域之外，則顯示將滾動。預設值為“true”。

語法

$(".selector").draggable(
   { scroll: false }
);
22 scrollSensitivity

指示滑鼠必須退出視窗多少畫素才能導致顯示滾動。預設值為“20”。

選項 - scrollSensitivity

指示滑鼠必須退出視窗多少畫素才能導致顯示滾動。預設值為“20”。

語法

$(".selector").draggable(
   { scrollSensitivity: 100 }
);
23 scrollSpeed

指示顯示一旦開始滾動時的滾動速度。預設值為“20”。

選項 - scrollSpeed

指示顯示一旦開始滾動時的滾動速度。預設值為“20”。

語法

$(".selector").draggable(
   { scrollSpeed: 100 }
);
24 snap

調整正在移動的專案的顯示在其他元素上（這些元素正在飛行）。預設值為“false”。

選項 - snap

調整正在移動的專案的顯示在其他元素上（這些元素正在飛行）。預設值為“false”。

語法

$(".selector").draggable(
   { snap: true }
);
25 snapMode

指定應如何在移動元素和options.snap中指示的元素之間進行調整。預設值為“both”。

選項 - snapMode

>指定應如何在移動元素和options.snap中指示的元素之間進行調整。預設值為“both”。

語法

$(".selector").draggable(
   { snapMode: "inner" }
);
26 snapTolerance

建立調整所需的職位差異的最大畫素數。預設值為“20”。

選項 - snapTolerance

建立調整所需的職位差異的最大畫素數。預設值為“20”。

語法

$(".selector").draggable(
   { snapTolerance: 30 }
);
27 stack

控制與選擇器匹配的元素集的 z-index，始終將當前拖動的專案置於最前面。在視窗管理器等方面非常有用。預設值為“false”。

選項 - stack

控制與選擇器匹配的元素集的 z-index，始終將當前拖動的專案置於最前面。在視窗管理器等方面非常有用。預設值為“false”。

語法

$(".selector").draggable(
   { stack: ".products"  }
);
28 zIndex

拖動時輔助元素的 Z-index。預設值為“false”。

選項 - zIndex

拖動時輔助元素的 Z-index。預設值為“false”。

語法

$(".selector").draggable(
   { zIndex: 100 }
);

以下部分將向您展示一些可拖動功能的工作示例。

預設功能

以下示例演示了可拖動功能的簡單示例，未將任何引數傳遞給draggable() 方法。

<!DOCTYPE html>
<html>
   <head>
      <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 { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
      </style>
      
      <script>
         $(function() {
            $( "#draggable" ).draggable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable" class = "ui-widget-content">
         <p>Drag me !!!</p>
      </div>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案dragexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它。您還必須看到以下輸出。現在，您可以使用結果：

停用、距離和延遲的使用

以下示例顯示了在 JqueryUI 的拖動函式中使用三個重要選項(a) disabled (b) delay 和(c) distance 的用法。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   
   <body>
      <div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me!</span><br /><br />
      </div>
      <div id = "div2" style = "border:solid 1px;background-color:grey;">
         <span>
            Dragging will start only after you drag me for 50px
         </span>
         <br /><br />
      </div>
      <div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
         <span>
            You have to wait for 500ms for dragging to start!
         </span>
         <br /><br />
      </div>

      <script>
         $("#div1 span").draggable (
            { disabled: true }
         );
         $("#div2 span").draggable (
            { distance: 50 }
         );
         $("#div3 span").draggable (
            { delay: 500 }
         );
      </script>
   </body>
</html>

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

約束移動

以下示例顯示瞭如何使用 JqueryUI 拖動函式中的containment 選項來限制螢幕上元素的移動。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
      
   <body>
      <div id = "div4" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can drag me only within this div.</span><br /><br />
      </div>
      <div id = "div5" style = "border:solid 1px;background-color:grey;">
         <span>You can drag me only along x axis.</span><br /><br />
      </div>

      <script>
         $("#div4 span").draggable ({
            containment : "#div4"
         });
         $("#div5 span").draggable ({
            axis : "x"
         });
      </script>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案dragexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它。它應該產生以下輸出。現在，您可以使用輸出：

這裡，<span> 元素被阻止超出 ID 為 div4 的 <div>。您還可以使用axis 值為“x”或“y”的選項來對垂直或水平運動施加約束，這也進行了演示。

透過複製移動內容

以下示例演示瞭如何移動所選元素的克隆。這是使用helper 選項並將其值設定為clone 來完成的。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   
   <body>
      <div id = "div6" style = "border:solid 1px;background:#eee; height:50px;">
         <span>You can duplicate me....</span>
      </div>
      
      <script>
         $("#div6 span").draggable ({
            helper : "clone"
         });
      </script>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案dragexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出：

如您所見，當第一個元素被拖動時，只有克隆的元素移動，而原始專案保持不動。如果釋放滑鼠，克隆的元素會消失，而原始專案仍位於其原始位置。

獲取當前選項值

以下示例演示瞭如何在指令碼執行期間隨時獲取任何選項的值。在這裡，我們將讀取執行時設定的cursor 和cursorAt 選項的值。類似地，您可以獲取任何其他可用選項的值。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <div id = "divX" style = "border:solid 1px;background:#eee; height:50px;">
         <span>Click anywhere on me to see cursor type...</span>
      </div>

      <script>
         /* First make the item draggable */
         $("#divX span").draggable();

         $("#divX span").bind('click', function( event ) {
            var cursor = $( "#divX span" ).draggable( "option", "cursor" );
            var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
            alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
         });
      </script>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案dragexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出：

$ (selector, context).draggable ("action", [params]) 方法

draggable (action, params) 方法可以在可移動元素上執行操作，例如防止位移。action 在第一個引數中指定為字串，並且可以根據給定的操作可選地提供一個或多個params。

基本上，這裡的操作只不過是以字串形式使用的 jQuery 方法。

語法

$(selector, context).draggable ("action", [params]);

下表列出了此方法的操作：

序號 操作及描述
1 destroy()

完全移除拖動功能。元素不再可移動。這將使元素恢復到其初始化前的狀態。

操作 - destroy()

完全移除拖動功能。元素不再可移動。這將使元素恢復到其初始化前的狀態。

語法

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

停用拖動功能。元素無法移動，直到下次呼叫 draggable("enable") 方法。

操作 - disable()

停用拖動功能。元素無法移動，直到下次呼叫 draggable("enable") 方法。

語法

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

重新啟用拖動管理。元素可以再次移動。

操作 - enable()

重新啟用拖動管理。元素可以再次移動。

語法

$(".selector").draggable("enable");
4 option(optionName)

獲取當前與指定optionName關聯的值。其中optionName是要獲取的選項的名稱，型別為String。

操作 - option(optionName)

獲取當前與指定optionName關聯的值。其中optionName是要獲取的選項的名稱，型別為String。

語法

var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
5 option()

獲取一個包含鍵/值對的物件，表示當前可拖動選項的雜湊表。

操作 - option()

獲取一個包含鍵/值對的物件，表示當前可拖動選項的雜湊表。

語法

var options = $( ".selector" ).draggable( "option" );
6 option(optionName, value)

設定與指定optionName關聯的可拖動選項的value。其中optionName是要設定的選項的名稱，value是要為選項設定的值。

操作 - option(optionName, value)

設定與指定optionName關聯的可拖動選項的value。其中optionName是要設定的選項的名稱，value是要為選項設定的值。

語法

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

為可拖動元素設定一個或多個選項。其中options是要設定的選項-值對的對映。

操作 - option(options)

為可拖動元素設定一個或多個選項。其中options是要設定的選項-值對的對映。

語法

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

返回一個包含可拖動元素的 jQuery 物件。

操作 - widget()

返回一個包含可拖動元素的 jQuery 物件。

語法

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

示例

現在讓我們看看一個使用上表中操作的示例。以下示例演示了操作disable和enable的使用。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   
   <body>
      <div id = "div7" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me. Dragging is disabled.</span><br><br>
      </div>
      <div id = "div8" style = "border:solid 1px;background-color:grey;">
         <span>You can move me. Dragging is enabled.</span><br><br>
      </div>
      
      <script>
         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');
      </script>
   </body>
</html>

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

如您所見，第一個元素被停用，第二個元素的拖動功能已啟用，您可以嘗試拖動它。

已移動元素上的事件管理

除了我們在前面章節中看到的可拖動 (options) 方法外，JqueryUI 還提供了事件方法，這些方法會在特定事件觸發時被呼叫。這些事件方法列在下面：

序號 事件方法和描述
1 create(event, ui)

當可拖動元素建立時觸發。其中event的型別為Event，ui的型別為Object。

事件 - create(event, ui)

當可拖動元素建立時觸發。其中event的型別為Event，ui的型別為Object。

語法

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

在拖動過程中滑鼠移動時觸發。其中event的型別為Event，ui的型別為Object，例如 helper、position、offset。

事件 - drag(event, ui)

在拖動過程中滑鼠移動時觸發。其中event的型別為Event，ui的型別為Object，例如 helper、position、offset。

語法

$(".selector").draggable(
   drag: function(event, ui) {}
);
3 start(event, ui)

當拖動開始時觸發。其中event的型別為Event，ui的型別為Object，例如 helper、position、offset。

事件 - start(event, ui)

當拖動開始時觸發。其中event的型別為Event，ui的型別為Object，例如 helper、position、offset。

語法

$(".selector").draggable(
   start: function( event, ui ) {}
);
4 stop(event, ui)

當拖動停止時觸發。其中event的型別為Event，ui的型別為Object，例如 helper、position、offset。

事件 - stop(event, ui)

當拖動停止時觸發。其中event的型別為Event，ui的型別為Object，例如 helper、position、offset。

語法

$(".selector").draggable(
   stop: function( event, ui ) {}
);

示例

以下示例演示了在拖動功能期間使用事件方法。此示例演示了drag事件的使用。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   
   <body>
      <div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
         <span>Drag me to check the event method firing</span><br /><br />
      </div>
      
      <script>
         $("#div9 span").draggable ({
            cursor: "move",
            axis : "x",
            drag: function( event, ui ) {
               alert("hi..");
            }
         });
      </script>
   </body>
</html>

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

現在嘗試拖動已寫入的內容，您將看到拖動事件的開始被觸發，這會導致顯示一個對話方塊，並且游標將更改為移動圖示，文字將僅在 X 軸上移動。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.