jQuery UI 拖放功能详解：元素回位(revert)机制解析

最新推荐文章于 2025-06-22 09:24:49 发布

乔印朗Dale

最新推荐文章于 2025-06-22 09:24:49 发布

阅读量357

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00410/article/details/148394139

jQuery UI 拖放功能详解：元素回位(revert)机制解析

jquery-ui jquery/jquery-ui: 是 jQuery 的一个官方扩展库，提供了多种 UI 组件和交互功能，可以方便地在 Web 应用中实现丰富的 UI 交互。适合对 jQuery、UI 组件和想要实现高效 UI 开发的开发者。项目地址: https://gitcode.com/gh_mirrors/jq/jquery-ui

一、功能概述

jQuery UI 提供了一个强大的拖放(Droppable)交互系统，其中元素回位(revert)机制是一个非常有用的特性。这个特性允许开发者在拖放操作完成后，控制被拖拽元素是否返回到原始位置。

在本文示例中，我们看到了两种不同的回位行为：

当拖拽元素被成功放置到目标区域时回位
当拖拽元素未被放置到目标区域时回位

二、核心代码解析

1. HTML结构

示例中定义了三个主要元素：

两个可拖拽元素(draggable)
一个可放置区域(droppable)

<div id="draggable" class="ui-widget-content">
	<p>I revert when I'm dropped</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>I revert when I'm not dropped</p>
</div>

<div id="droppable" class="ui-widget-header">
	<p>Drop me here</p>
</div>

2. JavaScript配置

$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });

$( "#droppable" ).droppable({
	classes: {
		"ui-droppable-active": "ui-state-active",
		"ui-droppable-hover": "ui-state-hover"
	},
	drop: function( event, ui ) {
		$( this )
			.addClass( "ui-state-highlight" )
			.find( "p" )
				.html( "Dropped!" );
	}
});