以下是关于 jQuery UI 的 Draggable stack 选项的详细攻略：
jQuery UI Draggable stack 选项
stack 选项用于指定可拖动元素在拖动期间是否应该在其他元素之上。可以使用该选项来控制可拖动元素在拖动期间的层级关系。
语法
$(selector).draggable({
stack: "selector"
});
参数
- selector: 用于指定可拖动元素在拖动期间应该在哪些元素之上。
示例一：使用 stack 选项控制层级关系
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Draggable stack 选项示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<style>
#draggable1, #draggable2 {
width: 150px;
height: 150px;
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
position: absolute;
}
#draggable2 {
top: 50px;
left: 50px;
}
</style>
<script>
$( function() {
$( "#draggable1" ).draggable({
stack: "#draggable2"
});
$( "#draggable2" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable1">
<p>Drag me around</p>
</div>
<div id="draggable2">
<p>Drag me around</p>
</div>
</body>
</html>
这将创建两个可拖动的元素，并使用 stack 选项将第一个元素置于第二个元素之上。在页面加载时，第一个元素将置于第二个元素之上。
示例二：使用 stack 选项和其他选项
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Draggable stack 选项示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<style>
#draggable1, #draggable2 {
width: 150px;
height: 150px;
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
position: absolute;
}
#draggable2 {
top: 50px;
left: 50px;
}
</style>
<script>
$( function() {
$( "#draggable1" ).draggable({
stack: "#draggable2",
cursor: "move",
revert: true
});
$( "#draggable2" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable1">
<p>Drag me around</p>
</div>
<div id="draggable2">
<p>Drag me around</p>
</div>
</body>
</html>
这将创建两个可拖动的元素，并使用 stack 选项将第一个元素置于第二个元素之上。同时，使用 cursor 选项来指定拖动时的光标样式，使用 revert 选项来指定拖动结束时是否应该返回原位置。在页面加载时，第一个元素将置于第二个元素之上。
总结：
stack 选项用于指定可拖动元素在拖动期间是否应该在其他元素之上。可以使用该选项来控制可拖动元素在拖动期间的层级关系。可以使用 $(selector).draggable({ stack: "selector" }); 来设置 stack 选项。可以与其他选项一起使用，以实现更复杂的可拖动元素功能。
以上是关于 jQuery UI 的 Draggable stack 选项的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI中的Draggable stack选项 - Python技术站
微信扫一扫 
支付宝扫一扫 