jQuery UI 实例 - 放置(Droppable)
jQuery UI 实例 - 放置(Droppable)
概述
jQuery UI 是基于 jQuery 的一套用户界面框架,提供了一些实用的 UI 组件和交互能力。其中一个组件就是放置(Droppable),它可以让用户在指定区域内拖拽和释放元素,从而实现一些有趣的交互效果。
功能说明
放置(Droppable)允许我们指定一个区域,然后设置一些事件回调函数,当我们在这个区域内拖拽元素时,就会触发这些事件。下面是一些常用的事件:
activate
:拖拽元素进入放置区域时触发;deactivate
:拖拽元素离开放置区域时触发;over
:拖拽元素在放置区域上时触发;out
:拖拽元素从放置区域上离开时触发;drop
:拖拽元素在放置区域上释放时触发。
放置(Droppable)组件支持一些选项设置,例如:
accept
:指定哪些元素可以被拖拽进放置区域;tolerance
:指定拖拽元素和放置区域之间的容错距离;hoverClass
:指定拖拽元素进入放置区域时应用的 CSS 类名;activeClass
:指定拖拽元素在拖拽过程中持续应用的 CSS 类名。
放置(Droppable)组件的使用非常灵活,可以根据需要进行各种定制,实现各种不同的交互效果。
示例代码
下面是一个简单的示例代码,演示了放置(Droppable)组件的基本使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droppable 示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
#droppable {
border: 2px solid blue;
width: 200px;
height: 200px;
padding: 5px;
}
.ui-droppable-hover {
background-color: yellow;
}
</style>
<script>
$(document).ready(function () {
$("#draggable").draggable();
$("#droppable").droppable({
accept: "#draggable",
activeClass: "ui-state-active",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>拖拽我</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>将元素拖拽到这里</p>
</div>
</body>
</html>
在这个示例中,我们创建了一个可拖拽的元素(#draggable
),并将它和一个放置区域(#droppable
)关联起来。当我们将可拖拽元素拖拽到放置区域上并松开鼠标时,会触发 drop
事件,并将放置区域的背景颜色变为黄色。
总结
通过放置(Droppable)组件,我们可以实现一些有趣的交互效果,例如拖拽排序、拖拽放大缩小等。我们可以通过设置各种选项和事件回调函数,来定制化放置(Droppable)组件,让它更符合我们的需求。