jQuery Draggable|极客教程

jQuery Draggable

jQuery Draggable 是一个 jQuery UI 插件，用于使元素可拖动。它提供了一种简单而强大的方式来创建可拖动的元素，用户可以通过拖动元素来改变其位置或大小。

基本使用

要使用 jQuery Draggable 插件，首先需要引入 jQuery 库和 jQuery UI 库。可以在页面的 <head> 标签中引入这两个库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

接下来，可以通过以下代码来启用拖动功能：

<div id="draggable" class="ui-widget-content">
  <p>拖动我！</p>
</div>

<script>
   $(function() {$ ("#draggable").draggable();
  });
</script>

在上面的示例中，我们创建了一个 div 元素，并给它一个 id="draggable"，然后通过 $("#draggable").draggable() 方法启用了拖动功能。当页面加载完成时，draggable() 方法会被调用，使 div 元素可以被拖动。

运行上面的代码后，你将看到一个可以拖动的 div 元素，你可以点击鼠标左键并拖动它。

选项

jQuery Draggable 插件还提供了许多选项，可以用来控制拖动的行为。以下是一些常用选项：

axis：指定元素只能沿指定轴进行拖动，可选值为 "x"（水平方向）或 "y"（垂直方向）。
containment：指定元素的范围，拖动时限制在父元素或指定的元素内。
helper：指定拖动时显示的辅助元素，可设置为 "clone"（复制原始元素）或一个函数。
snap：指定一个或多个元素，拖动时会吸附到这些元素的边界。

以下是一个使用选项的示例：

<div id="draggable" class="ui-widget-content">
  <p>拖动我！</p>
</div>

<script>
   $(function() {$ ("#draggable").draggable({
      axis: "x",
      containment: "parent",
      helper: "clone",
      snap: "div"
    });
  });
</script>

在上面的示例中，我们指定了 axis 为 "x"，containment 为 "parent"，helper 为 "clone"，snap 为 "div"。这样操作时，元素只能在水平方向拖动，且限制在父元素内。拖动时会显示一个克隆的辅助元素，并且会吸附到所有 <div> 元素的边界。

事件

jQuery Draggable 插件还提供了一些事件，可以在拖动过程中触发。以下是一些常用事件：

start：开始拖动时触发。
drag：拖动时触发。
stop：停止拖动时触发。

可以通过以下代码来监听这些事件：

<div id="draggable" class="ui-widget-content">
  <p>拖动我！</p>
</div>

<script>
   $(function() {$ ("#draggable").draggable({
      start: function(event, ui) {
        console.log("开始拖动！");
      },
      drag: function(event, ui) {
        console.log("拖动中...");
      },
      stop: function(event, ui) {
        console.log("停止拖动！");
      }
    });
  });
</script>

在上面的示例中，我们监听了 start、drag 和 stop 事件，分别在开始拖动、拖动中和停止拖动时打印了相应的信息。可以根据需要在这些事件中执行相应的操作。

方法

jQuery Draggable 插件还提供了一些方法，可以在拖动过程中调用。以下是一些常用方法：

enable：启用拖动功能。
disable：禁用拖动功能。

可以通过以下代码来调用这些方法：

<div id="draggable" class="ui-widget-content">
  <p>拖动我！</p>
</div>

<button id="enable">启用</button>
<button id="disable">禁用</button>

<script>
   $("#draggable").draggable();$ ("#enable").click(function() {
     $("#draggable").draggable("enable"); });$ ("#disable").click(function() {
    $("#draggable").draggable("disable");
  });
</script>

在上面的示例中，我们创建了两个按钮，分别用来启用和禁用拖动功能。通过点击按钮可以调用 draggable("enable") 和 draggable("disable") 方法来实现。