jQuery UI | draggable() 和 droppable() 方法

介绍

jQuery UI（User Interface）是 jQuery 的一款插件库，用于创建交互式组件和效果，是对 jQuery 的扩展和增强。其中 draggable() 和 droppable() 是两个非常实用的交互组件方法。

• draggable()：使元素可以被拖拽。
• droppable()：定义一个可放置的区域，当元素被拖拽到该区域时，某些操作（如添加、修改、删除等）就会被触发。

可以在拖拽元素时，实时调用一些自定义的回调函数。同时，还可以通过配置参数实现更多高级功能，比如拖拽限制、鼠标拖拽、视觉反馈等等。

使用方法

引入 jQuery 和 jQuery UI

在使用这两个方法之前，先确保引入了 jQuery 和 jQuery UI 的库文件，可以选择下载或使用 CDN。

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<!-- 引入 jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

draggable()

对元素进行拖拽时，可以使用 draggable() 方法。以下是一些基本的使用方法：

$( "#draggable" ).draggable(); // 对 id 为 "draggable" 的元素调用 draggable() 方法

$( "#draggable" ).draggable({ // 可以使用配置参数，控制拖拽的方向、距离等等
  axis: "x",
  containment: "parent",
  cursor: "move"
});

可以通过以下语句获得当前元素位置：

var position = $( "#draggable" ).position();
console.log( "left: " + position.left + ", top: " + position.top );

droppable()

使用 droppable() 方法，可以实现对某个区域的放置操作。以下是基本的使用方法：

$( "#droppable" ).droppable(); // 对 id 为 "droppable" 的元素调用 droppable() 方法

$( "#droppable" ).droppable({ // 可以使用配置参数，定义放置区域的范围、触发事件等等
  accept: "#draggable",
  drop: function( event, ui ) {
    addContentToDroppableElement(ui.draggable);
  }
});

在这个例子中，容器中的元素可以被拖拽，但只有拖拽的是 id 为 "draggable" 的元素时，才会触发 drop 事件，在该事件中可以实现自己的逻辑操作。

注释

draggable() 和 droppable() 方法可以让页面更加丰富、交互性更高。在项目中，可以根据具体需求进行配置，实现更多扩展功能。但是，复杂的实现需要深入理解坐标系、事件机制等技术原理，因此需要更加深入的学习和实践。