ドラッグ可能な要素と削除可能な要素が1つあります。JQuery UIのdroppable要素が無効になっているオプションが無効になっています
ラジオボタンの1つのセットを使用して、droppable> option> disabledのステータスをTrueまたはFalseに変更しています。私はそれが働いていると私はすることができる午前ので無効オプションがfalseに設定されている(ドロップ可能なの)無効オプションの値を読み取り、デフォルトでのdiv#d1を
の内側に表示していますステータスを確認するには
ドロップ可能な要素の中に要素をドロップします。オプションをTrueにしてからFalseに変更すると、それは機能しません。ステータスは、無効なオプションがfalseに設定されているがまだ受け入れていないことを示しています。
$(document).ready(function() {
///////////
$(function() {
$("#draggable").draggable({
});
});
///////////
$("#droppable").droppable({
drop: function(event, ui) {
$(this)
.find("p")
.html("Welcome Dropped!");
}
});
///////////////
var status_used = $("#droppable").droppable("option", "disabled");
$('#d1').html(" <b>Status of option : disabled </b> " + status_used);
////////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$("#droppable").droppable("option", "disabled", sel);
var status_used = $("#droppable").droppable("option", "disabled");
$('#d1').html(" <b>Status of option : disabled </b>: " + "("+ sel + ")" +
status_used);
})
///////////////////////
})
HTML部分は、ここで
<div class='row'> <div class='col-md-6'>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my distination</p>
</div>
</div><div class='col-md-2'>
<div id="droppable" class="ui-widget-header" >
<p>Dropp here</p>
</div>
</div></div>
<div id=d1></div>
<br>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r1' value='true' > True</label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r2' value='false' checked>False</label>
</div>