這是一個使用start
回調的工作示例。
可以使用allowdrag
複選框以啓用/禁用拖動功能:
$(document).ready(function() {
$("#draggable").draggable({
revert: "invalid",
start: function(e) {
if (!$('#allowdrag').is(':checked')) {
e.preventDefault();
}
}
});
$("#Dropable").droppable({
activeClass: "ui-state-highlight",
drop: function (event, ui) {
alert("dropped!");
},
tolerance: 'fit'
});
});
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#Dropable {
height:300px;
width:400px;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<input type="checkbox" id="allowdrag" /><label for="allowdrag"> Allow drag</label><br />
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="Dropable">Droppable area</div>
您可以更改if (!$('#allowdrag').is(':checked')) {
一部分,無論你想爲了使檢查/禁用拖動選項。
您可以使用「禁用」方法來防止它啓動嗎? –