jquery ui.draggable.js 拖拽插件

ui.draggable.js 是 jQuery UI 框架中的一个插件，用于实现 HTML 元素的拖拽功能。jQuery UI 是一个流行的 JavaScript 库，用于创建交互式的 web 前端界面组件。

ui.draggable.js 允许你将指定的 HTML 元素设置为可拖拽，用户可以通过鼠标拖动该元素在页面上移动。当用户开始拖动可拖拽元素时，可以触发各种事件，例如拖拽开始、拖拽过程中、拖拽结束等，开发人员可以利用这些事件来执行自定义的操作。

<!-- HTML元素，设置为可拖拽 -->
<div id="目标元素id" class="draggable-box"> Drag me </div> 

<!-- 引入 jQuery 和 jQuery UI 库 --> 
<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> <script> 

// 当文档加载完成后执行 
$(document).ready(function(){ 
  // 将指定元素设置为可拖拽 
  $("#目标元素id").draggable({
  #事件：start触发启动事件，drag触发拖拽事件，stop触发结束事件
  start:function(){
    //启动开始
  } ,
  drag:function(){
    //拖拽
  },
  stop:function(){
    //结束开始
  }
  }); 
}); 
</script> 

拖拽排序

<li id="draggable" class="ui-state-highlight">拖拽我下来</li>

<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
</ul>

//排序函数
$("#sortable").sortable({ revert:true});

//拖拽函数
$('#draggable').draggable({
  #允许将拖拽的元素放置到 #sortable 中
  connectToSortable:"#sortable",
  helper:"clone",
  revert:"invalid"
});