web-dev-qa-db-ja.com

HTML要素でのドラッグアンドドロップを無効にしますか？

私は、フル機能のウィンドウシステムを実装しようとしているWebアプリケーションに取り組んでいます。今は非常にうまくいっている、私は1つの小さな問題に遭遇しているだけです。時々、アプリケーションの一部（ほとんどの場合、サイズ変更操作をトリガーするはずのウィンドウのコーナーdiv）をドラッグすると、Webブラウザーは賢くなり、何かをドラッグアンドドロップするつもりだと思います。最終結果、ブラウザーがドラッグアンドドロップを実行している間、アクションが保留されます。

ブラウザのドラッグアンドドロップを無効にする簡単な方法はありますか？ユーザーが特定の要素をクリックしている間はオフにすることが理想ですが、ユーザーがウィンドウのコンテンツでブラウザの通常の機能を使用できるように再度有効にする必要があります。私はjQueryを使用していますが、ドキュメントを参照することはできませんでしたが、純粋なjQueryソリューションを知っている場合は優れています。

つまり、ユーザーがマウスボタンを押している間はブラウザーのテキスト選択とドラッグアンドドロップ機能を無効にし、ユーザーがマウスを離したときにその機能を復元する必要があります。

javascriptjquerycsswebbrowser-control
93
Nicholas Flynt

Mousedownイベントでデフォルトを防止してみてください：

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

または

<div onmousedown="return false">asd</div>
68
Sergey Ilinsky

このことは機能します.....それを試してください。

<BODY ondragstart="return false;" ondrop="return false;">

それが役に立てば幸い。ありがとう

195
SyntaxError

draggable="false"属性を使用するだけで、ドラッグを無効にできます。
http://www.w3schools.com/tags/att_global_draggable.asp

15
icl7126

これは動作する可能性があります：テキスト、画像、基本的にすべてに対してcss3を使用した選択を無効にすることができます。

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.Microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

もちろん、新しいブラウザのみです。詳細については、次を確認してください。

CSSを使用してテキスト選択の強調表示を無効にする方法

13
Tosh

JQueryを使用すると、次のようになります。

$(document).ready(function() {
  $('#yourDiv').on('mousedown', function(e) {
      e.preventDefault();
  });
});

私の場合、入力のドロップテキストからユーザーを無効にしたいので、「mousedown」ではなく「drop」を使用しました。

$(document).ready(function() {
  $('input').on('drop', function(event) {
    event.preventDefault();
  });
});

代わりに、event.preventDefault（）でfalseを返すことができます。 ここに違いがあります。

そしてコード：

$(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});
7
Victor Romano

@SyntaxErrorの答えを使用して、 https://stackoverflow.com/a/13745199/513404

Reactでこれをなんとかすることができました。私が理解できる唯一の方法は、ondragstartメソッドとondropメソッドを参照にアタッチすることでした。

  const panelManagerBody = React.createRef<HTMLDivElement>();
  useEffect(() => {
    if (panelManagerBody.current) {
      panelManagerBody.current.ondragstart = () => false;
      panelManagerBody.current.ondrop = () => false;
    }
  }, [panelManagerBody]);

  return (
    <div ref={panelManagerBody}>
0
kriskate

これを試して

$('#id').on('mousedown', function(event){
    event.preventDefault();
}
0
crazyjune

input要素の場合、 この答え が機能します。

Angular 4のカスタム入力コンポーネントに実装しましたが、純粋なJSで実装できると思います。

HTML

<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)" 
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>

コンポーネント定義（JS）：

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}
0
Tito Leiva