HTML 要素でのドラッグ アンド ドロップを防ぐにはどうすればよいですか?

HTML 要素でのドラッグ アンド ドロップの禁止: 包括的なソリューション

ウィンドウ システムを使用して複雑な Web アプリケーションを開発していると、時折、障害物。具体的には、ブラウザのデフォルトのドラッグ アンド ドロップ動作が、意図したサイズ変更操作を妨げる可能性があります。これを解決するには、次の解決策の採用を検討してください。

特定の要素のドラッグ アンド ドロップを無効にする

HTML イベントの ondragstart および ondrop を利用することで、ドラッグを無効にすることができます。特定の HTML 要素内で -and-drop します。次の属性を関連する要素に組み込みます:

<div>
<p>または、ドキュメント本文全体で無効にして、必要に応じて再度有効にすることもできます:</p>
<pre class="brush:php;toolbar:false">

jQuery解決策

jQuery を使用して同じ結果を達成するには、 raggable() メソッド:

$(document).ready(function() {
  $('#draggable').draggable({
    disabled: true
  });
});

動的有効化/無効化

ドラッグ アンド ドロップ機能を動的に切り替える必要があるシナリオでは、enable( jQuery の) および disable() メソッド:

$('#draggable').draggable('disable');
...
$('#draggable').draggable('enable');

包括的機能

このアプローチは、ユーザーがマウス ボタンを押している間、ブラウザーのテキスト選択とドラッグ アンド ドロップを効果的に無効にします。マウスボタンを放すと機能が復元されます。よりきめ細かい制御を行うには、ドラッグ アンド ドロップが無効になる要素を指定できます。