极客教程jQuery Mobile Droppable disabled 选项
jQuery Mobile是一种基于网络的技术，用于为网站制作响应式内容，可以在所有类型的智能手机、平板电脑和台式机上访问。在这篇文章中，我们将使用jQuery Mobile Droppable disabled 选项来禁用droppable，如果设置为真，这也接受布尔值参数。
语法： disabled选项取一个布尔值，语法如下。如果为真，我们可以禁用该面板，反之亦然。
$("#selector").droppable({
disabled: true
});
- 获取disabled 选项
var disabled = $( ".selector" ).droppable( "option", "disabled" );
- 设置disabled 选项
$( ".selector" ).droppable( "option", "disabled", false );
CDN链接：下面是一些jQuery Mobile脚本，你的项目将需要这些脚本，所以要把它们添加到你的项目中。
<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
例子：这个例子描述了jQuery Mobile Droppable disabled选项的用途。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.dragg {
width: 90px;
height: 50px;
border: 1px solid black;
background-color: blue;
}
.dropp2,
.dropp3 {
width: 200px;
height: 50px;
border: 1px solid black;
float: center;
background-color: green;
}
</style>
<script>
(function () {
(".dragg").draggable();
(".dropp2").droppable({
drop: function (event, ui) {
(this)
.find("p")
.html("Dropped!");
}
});
(".dropp3").droppable({
disabled: true
});
(".dropp3").droppable({
drop: function (event, ui) {
$(this)
.find("p")
.html("Dropped!");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery UI Droppable disabled Option</h3>
<div class="dragg">
<p>Drag</p>
</div>
<br><br>
<div class="dropp2">
<p>Drop here</p>
</div>
<br><br>
<div class="dropp3">
<p>Disable - Can't Drop Here</p>
</div>
</center>
</body>
</html>
输出:
jQuery Mobile Droppable disabled 选项