다음은 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')) {
부분을 변경할 수 있습니다/드래그 옵션을 비활성화 .
당신은 심지어 시작 방지하기 위해 "사용 안 함"방법을 사용할 수 있습니까? –