以下是关于 jQuery UI 的 Draggable enable() 方法的详细攻略:
jQuery UI Draggable enable() 方法
enable() 方法用于启用可拖动元素。可以使用该方法在禁用可拖动元素后重新启用它。
语法
$(selector).draggable("enable");
示例一:使用 enable() 方法
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Draggable enable() 方法示例</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>
#draggable {
width: 150px;
height: 150px;
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
}
#disable-button {
margin-top: 10px;
}
</style>
<script>
$( function() {
$( "#draggable" ).draggable();
$( "#disable-button" ).click( function() {
$( "#draggable" ).draggable( "disable" );
});
$( "#enable-button" ).click( function() {
$( "#draggable" ).draggable( "enable" );
});
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
<button id="disable-button">Disable</button>
<button id="enable-button">Enable</button>
</body>
</html>
这将创建一个可拖动的元素,并使用 enable() 方法在禁用可拖动元素后重新启用它。同时,使用两个按钮来演示禁用和启用可拖动元素的效果。
示例二:使用 enable() 方法和回调函数
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Draggable enable() 方法示例</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>
#draggable {
width: 150px;
height: 150px;
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
}
</style>
<script>
$( function() {
$( "#draggable" ).draggable({
start: function(event, ui) {
$(this).css("background-color", "blue");
},
stop: function(event, ui) {
$(this).css("background-color", "#ccc");
}
});
$( "#disable-button" ).click( function() {
$( "#draggable" ).draggable( "disable", function() {
alert("Draggable disabled!");
});
});
$( "#enable-button" ).click( function() {
$( "#draggable" ).draggable( "enable", function() {
alert("Draggable enabled!");
});
});
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
<button id="disable-button">Disable</button>
<button id="enable-button">Enable</button>
</body>
</html>
这将创建一个可拖动的元素,并使用 enable() 方法在禁用可拖动元素后重新启用它。同时,使用回调函数来演示启用和禁用可拖动元素的效果。
总结:
enable() 方法用于启用可拖动元素。可以使用该方法在禁用可拖动元素后重新启用它。可以使用 $(selector).draggable("enable"); 来启用可拖动元素。可以与其他方法一起使用,以实现更复杂的可拖动元素功能。
以上是关于 jQuery UI 的 Draggable enable() 方法的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery UI的Draggable enable()方法 - Python技术站