jQuery Mobile 是一个用于创建响应式网站的JavaScript库。其中Droppable组件是一种可拖拽的对象，目的是实现交互效果，用户可以将拖动的元素放置到Droppable组件中。而Disabled选项是该组件的一种设置，可以禁用该组件。下面是关于如何使用jQuery Mobile Droppable disabled 选项的完整攻略:
1. 前置条件
在使用Droppable组件之前，需要引入正确版本的jQuery和jQuery UI及其CSS文件。jQuery版本需要是1.9.1及以上版本，jQuery UI版本需要是1.10.0版本及以上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Droppable disabled 选项</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
2. 基本用法
Droppable组件有一个disabled属性，设置为true时，该组件将被禁用。以下示例展示如何创建一个Droppable组件，并将其禁用。
<div id="droppable" data-role="droppable" data-disabled="true">
放置区域
</div>
在以上代码中，data-role="droppable"表示将该DOM元素转化为Droppable组件，data-disabled="true"表示将该组件禁用。
3. 示例说明
下面有两个Droppable示例，一个是实现可拖拽排序的，另一个是实现拖拽文件上传的。这两个示例都包含使用disabled选项的示例。
3.1 可拖拽排序
以下示例展示如何实现一个可拖拽排序的列表，用户可以拖拽列表项，将其排序，当某个列表项被拖拽时，其他列表项会自动调整位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可拖拽排序</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<style>
ul li {
background: #ccc;
padding: 10px;
}
</style>
</head>
<body>
<ul data-role="listview" data-inset="true" id="sortable">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<script>
$(function(){
$('#sortable').sortable({
disabled: true,
update: function( event, ui ) {
console.log('排序后的元素：', $(this).sortable('toArray'))
}
}).disableSelection();
$('#enableSort' ).on( 'click', function() {
$('#sortable').sortable('option', 'disabled', false);
});
$('#disableSort' ).on( 'click', function() {
$('#sortable').sortable('option', 'disabled', true);
});
});
</script>
<button id="enableSort">启用排序</button>
<button id="disableSort">禁用排序</button>
</body>
</html>
以上代码创建了一个UL列表，列表项可拖拽排序。disabled: true表示一开始时该列表处于禁用状态，用户无法对列表进行操作。点击“启用排序”按钮后，列表将从禁用状态转变为启用状态，用户可以进行拖拽排序。$('#sortable').sortable('option', 'disabled', false);语句启用了排序，$('#sortable').sortable('option', 'disabled', true);语句关闭了排序。
3.2 拖拽文件上传
以下示例展示如何实现一个拖拽文件上传的功能，用户可以将文件拖拽到页面上的指定区域，将文件上传至服务器。当该区域禁用时，用户无法将文件上传至服务器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽文件上传</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<style>
#fileupload {
border: 2px dashed #aaa;
padding: 5px;
margin: 10px;
}
#fileupload:hover {
border-color: #333;
}
.alert {
text-align: center;
color: #666;
font-size: 16px;
}
</style>
</head>
<body>
<form enctype="multipart/form-data" method="post" action="./upload.php">
<div id="fileupload" data-role="droppable" data-disabled="true">
将文件拖拽至此处上传
</div>
<input type="file" name="file" id="file">
<div class="alert">
注:支持的文件类型为:doc,docx,ppt,pptx,xls,xlsx,txt,pdf,zip,rar,7z,gz,bz2
</div>
<script>
$(function(){
$('#fileupload').bind({
dragover: function(event) {
$(this).addClass('hover');
return false;
},
dragleave: function(event) {
$(this).removeClass('hover');
return false;
},
drop: function(event) {
$(this).removeClass('hover');
event.preventDefault();
var files = event.originalEvent.dataTransfer.files;
if (files.length > 0) {
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file', files[i]);
}
$.ajax({
url: './upload.php', // 提交地址
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function(data) {
console.log('上传成功，服务器返回数据：', data);
if (data.code === 0) {
// 上传成功
alert('上传成功');
} else {
// 上传失败
alert('上传失败');
}
},
error: function() {
console.log('上传失败');
alert('上传失败');
}
});
}
return false;
}
});
$('#enableUpload' ).on( 'click', function() {
$('#fileupload').droppable('option', 'disabled', false);
});
$('#disableUpload' ).on( 'click', function() {
$('#fileupload').droppable('option', 'disabled', true);
});
});
</script>
</form>
<button id="enableUpload">启用上传</button>
<button id="disableUpload">禁用上传</button>
</body>
</html>
以上代码创建了一个用于上传文件的表单，用户可以将文件拖拽至文件上传区域，将文件上传至服务器。data-disabled="true"表示一开始时该上传区域处于禁用状态，用户无法上传文件。使用jQuery binds()绑定了dragover、dragleave和drop事件。点击“启用上传”按钮后，文件上传区域将从禁用状态转变为启用状态，用户可以上传文件。$('#fileupload').droppable('option', 'disabled', false);语句启用了上传，$('#fileupload').droppable('option', 'disabled', true);语句关闭了上传。