JQuery UI的拖拽功能实现方法小结

我来简要介绍一下实现JQuery UI的拖拽功能的方法。

1. 引入JQuery UI库

首先要在html中引入JQuery和JQuery UI库文件，可以通过CDN，可以下载到本地后引入。

<!-- 引入 JQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入JQuery UI -->
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

2. 设置元素为可拖拽

要使用JQuery UI实现拖拽功能，必须先将元素设置为可拖拽。可以通过设置class或id选择器。

<!-- 设置class为draggable的元素为可拖拽 -->
<div class="draggable">可拖拽元素</div>

<!-- 设置id为draggable的元素为可拖拽 -->
<div id="draggable">可拖拽元素</div>

3. 使用拖拽功能

通过设置元素为可拖拽，就可以使用JQuery UI的拖拽功能了，拖拽效果有一些可选择的参数，下面是一个拖拽实例代码：

$(function() {
  $(".draggable").draggable({
    containment: "parent",  //定义拖拽范围为父元素内（也可以是其他容器元素）
    opacity: 0.5,  //定义拖拽元素透明度
    revert: true  //定义拖拽后元素是否返回原位置
  });
});

示例1：在容器内拖拽元素

<div id="container" style="width: 500px;height: 500px;border: 1px solid gray;">
  <div class="draggable" style="background-color: green;width: 50px;height: 50px;"></div>
  <div class="draggable" style="background-color: yellow;width: 50px;height: 50px;"></div>
  <div class="draggable" style="background-color: blue;width: 50px;height: 50px;"></div>
</div>

$(function() {
  $(".draggable").draggable({
    containment: "#container",
    opacity: 0.5,
    revert: true
  });
});

上述代码中，设置div元素为可拖拽（class="draggable"），并在父元素内（id="container"）可拖拽，当元素拖拽后，拖拽元素将只能在父元素的范围内移动。

示例2：定义拖拽元素停止后的操作

<div class="draggable" style="background-color: pink;width: 100px;height: 100px;"></div>

$(function() {
  $(".draggable").draggable({
    containment: "parent",
    stop: function(event, ui) {  //定义拖拽停止后的操作
      //输出拖拽元素停止后的位置
      console.log(ui.position.left);
      console.log(ui.position.top);
    }
  });
});

上述代码中，我们通过设置拖拽元素的stop选项，并定义回调函数，实现拖拽停止后的操作。在上述代码中，我们通过console.log()方法输出了拖拽元素停止后的left和top值。

希望这些说明对你有所帮助。