这里使用了 jQuery UI 中的 draggable() 方法，这样用户就可以通过鼠标拖拽元素来移动它的位置。你可以在 HTML 中引入以下 jQuery UI 的 CSS 文件和 JS 文件：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
自定义元素的移动范围
你可以使用 jQuery UI 中的 containment 选项来限制元素的移动范围。例如：
$("#box").draggable({ containment: "parent" });
这里将元素限制在其父元素的边界内。
自定义元素移动的方向
你可以使用 jQuery UI 中的 axis 选项来限制元素的移动方向。例如：
$("#box").draggable({ axis: "x" });
这里将元素只允许水平方向的移动。
定义元素移动结束时执行的操作
你可以用 jQuery UI 中的 stop 事件来定义元素移动结束时执行的操作。例如：
$("#box").draggable({
stop: function() {
alert("元素移动结束");
这里定义了一个弹出提示框，当用户停止拖拽元素时会触发。你可以在函数中编写任何你需要执行的操作。
其他一些常见的选项和事件，你可以在 jQuery UI 的官方文档中找到更多信息。
