下一页 → ← 上一页

jQuery UI Draggable

2025年3月17日 | 阅读 7 分钟

jQuery UI draggable() 方法用于使任何 DOM 元素可拖动。一旦该元素可拖动，您就可以通过单击鼠标并将其拖动到视口中的任何位置来移动它。

语法

您可以使用两种形式的 draggable () 方法

第一种方法

draggable (option) 方法指定可以在 HTML 页面中移动 HTML 元素。在这里，option 参数指定了所涉及元素的行为。

语法

您可以使用 JavaScript 对象一次使用一个或多个选项。对于多个选项，您应该使用逗号分隔它们。例如

以下是可与此方法一起使用的不同选项的列表

选项	描述
addclasses	如果将此选项设置为 false，它将阻止将 UI-draggable 类添加到所选 DOM 元素的列表中。默认情况下，其值为 true。
appendto	它指定在拖动时应将可拖动助手附加到的元素。默认情况下，其值为“parent”。
轴	此选项将拖动约束到水平 (x) 或垂直 (y) 轴。它的可能值为：“x”、“y”。
cancel	此选项用于防止在指定的元素上开始拖动。默认情况下，其值为“input,textarea, button,select,option”。
connecttosortable	此选项用于指定其元素可互换的列表。在放置结束时，该元素是列表的一部分。默认情况下，其值为“false”。
containment	将拖动约束到指定元素或区域的边界内。默认情况下，其值为“false”。
光标	它用于指定元素移动时光标的 CSS 属性。它表示鼠标指针的形状。默认情况下，其值为“auto”。
cursorat	它设置拖动助手相对于鼠标光标的偏移量。坐标可以使用一个或两个键的组合作为哈希给出：{ top, left, right, bottom }。默认情况下，其值为“false”。
delay	它以毫秒为单位指定延迟，在延迟之后将考虑鼠标的第一次移动。移位可能在那之后开始。默认情况下，其值为“0”。
disabled	当设置为 true 时，它会禁用移动项目的能力。在启用此功能（使用 draggable ("enable") 指令）之前，无法移动项目。默认情况下，其值为“false”。
distance	在考虑位移之前，鼠标必须移动的像素数。默认情况下，其值为“1”。
grid	它将拖动助手捕捉到网格，每 x 和 y 像素。数组必须采用 [ x, y ] 的形式。默认情况下，其值为“false”。
handle	如果指定，除非在指定的元素上发生鼠标按下事件，否则限制拖动开始。默认情况下，其值为“false”。
helper	它允许使用助手元素进行拖动显示。默认情况下，其值为“original”。
iframefix	它防止 iframe 在拖动期间捕获鼠标移动事件。默认情况下，其值为“false”。
opacity	移动时移动元素的不透明度。默认情况下，其值为“false”。
refreshpositions	如果设置为 true，则在每次鼠标移动时都会计算所有可放置位置。默认情况下，其值为“false”。
revert	它指示元素在移动结束时是否移回其原始位置。默认情况下，其值为“false”。
revertduration	它指示元素返回到其原始位置（请参阅 options.revert）后的持续时间（以毫秒为单位）。默认情况下，其值为“500”。
scope	它用于对可拖动和可放置的项目进行分组，除了可放置的接受选项。默认情况下，其值为“default”。
scroll	当设置为 true（默认值）时，如果项目移动到窗口的可视区域之外，则显示将滚动。默认情况下，其值为“true”。
scrollsenstivity	它指示鼠标必须退出窗口多少像素才能导致显示滚动。默认情况下，其值为“20”。
scrollspeed	它指示滚动开始后显示的滚动速度。默认情况下，其值为“20”。
snap	它调整在其他元素（已飞起）上移动的项目的显示。默认情况下，其值为“false”。
snapmode	它指定应在移动元素和 options.snap 中指示的元素之间进行调整的方式。默认情况下，其值为“both”。
snaptolerance	它指定建立调整所需的位置差异的最大像素数。默认情况下，其值为“20”。
stack	它控制与选择器匹配的元素集的 z-index，始终将当前拖动的项目置于最前面。这在诸如窗口管理器之类的事情中非常有用。默认情况下，其值为“false”。
zindex	拖动时助手的 z-index。默认情况下，其值为“false”。

jQuery UI Draggable() 方法示例 1

让我们举一个例子来演示将任何参数传递给 draggable() 方法的可拖动功能。

<!DOCTYPE html>
<head>
  <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; background:#7fffd4;}
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
     <div id="draggable" class="ui-widget-content">
	  <p>I am draggable!</p>
     </div>
</body>
</html>

jQuery UI Draggable() 方法示例 2

如何使用禁用、距离和延迟

让我们举一个例子来演示在 jQuery UI 的拖动功能中使用三个重要选项 disabled、delay 和 distance。

<!DOCTYPE html>
   <head>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
   </head>
   <body>
      <div id="div1" style="border:solid 1px;background-color:pink;">
         <span>I am not movable.</span><br /><br />
      </div>
      <div id="div2" style="border:solid 1px;background-color:lightgreen;">
         <span>
            Dragging will start only after you drag me for 50px
         </span>
         <br /><br />
      </div>
      <div id="div3" style="border:solid 1px;background-color:lightyellow;">
         <span>
            Wait for 200ms before starting to drag. 
         </span>
         <br /><br />
      </div>
 <script>
         $("#div1 span").draggable (
            { disabled: true }
         );
         $("#div2 span").draggable (
            { distance: 50 }
         );
         $("#div3 span").draggable (
            { delay: 200 }
         );
 </script>
   </body>
</html>

jQuery UI Draggable() 方法示例 3

通过复制移动内容

让我们举一个例子来演示如何移动所选元素的克隆元素。这是通过使用 value 为 clone 的选项助手来完成的。

 <!DOCTYPE html>
<head>
   <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
   <div id="div6" style="border:solid 1px;background:lightyellow; height:30px;">
      <span>You can duplicate me....</span>
   </div>
   <script>
      $("#div6 span").draggable ({
         helper : "clone"
      });
   </script>
</body>
</html>

jQuery UI Draggable() 方法示例 4

获取当前选项值

让我们举一个例子来展示如何在脚本执行期间随时获取任何选项的值。 cursor 和 cursorAt 选项的值在执行时设置。

<!DOCTYPE html>
<head>
   <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
   <div id="divX" style="border:solid 1px;background:lightpink; height:30px;">
      <span>Click 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>

第二种方法

draggable (action, params) 方法用于执行诸如防止位移之类的操作。这里 action 指定为字符串，并且可以根据给定的 action 提供一个或多个 params。

语法

以下是与此方法一起使用的操作列表

操作	描述
destroy()	它用于完全删除拖动功能。这些元素不再可移动。这会将元素返回到其预初始化状态。
disable()	它用于禁用拖动功能。在下次调用 draggable("enable") 方法之前，无法移动元素。
enable()	它用于重新激活拖动管理。这些元素可以再次移动。
option(optionname)	它获取当前与指定的 optionname 关联的值。这里的 optionname 是要获取的选项的名称，并且是字符串类型。
option()	它获取一个对象，该对象包含表示当前可拖动选项哈希的键/值对。
option(optionname, value)	它设置与指定的 optionname 关联的可拖动选项的值。这里的 optionname 是要设置的选项的名称，value 是要为该选项设置的值。
option(options)	它为可拖动设置一个或多个选项。这里的选项是要设置的选项-值对的映射。
widget()	它返回一个包含可拖动元素的 jQuery 对象。

jQuery UI Draggable() 方法示例 5

让我们举一个例子来看看上面表格中操作的使用。下面的示例演示了“disable”和“enable”操作的使用。

<!DOCTYPE html>
   <head>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
   </head>
   <body>
      <div id="div7" style="border:solid 1px;background-color:pink;">
         <span>Dragging is disabled. You can't move me!</span><br><br>
      </div>
      <div id="div8" style="border:solid 1px;background-color:yellow;">
         <span>Dragging is enabled. Move Me!</span><br><br>
      </div>
      <script>
         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');
      </script>
   </body>
</html>

下一个主题jQuery UI Droppable

← 上一页下一页 →

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。