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

109

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

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

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

— ニコラス・フリント
ソース

2

ドラッグ以外の操作には影響しないため、@ SyntaxErrorの回答（投票数100以上）が選択された回答になることを推奨します。

— Shaun Wilson

78

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

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

または

<div onmousedown="return false">asd</div>

— セルゲイ・イリンスキー
ソース

2

+1-ただし、これはFirefox（6.0以前）で不幸な副作用を引き起こし、:active疑似クラスが要素に適用されないようにします。つまり、リンクに実際に使用することはできません。

— アンディE

3

すみません、これはひどいです。以下の回答を参照してください。

— Madbreaks

216

このことはうまくいきます。

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

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

— 構文エラー
ソース

6

よく働く！（属性も<div>要素に配置できます。）

— VasiliNovikov 2014年

4

この回答に投票しました。マウスダウン応答IMOが短すぎます（他のケースではマウスダウンイベントを使用できます）。この答えは完璧に機能しました:)

— Daniel van Dommele 14年

4

これは確かにはるかに良い答えです。マウスを押したときに 'preventDefault（）'を使用すると、副作用が多すぎます（たとえば、フォームテキスト入力のフォーカス/フォーカス解除を防ぐ）

— Jecimi

これはクリックアクションに影響を与えないので、これは受け入れられた答えであるはずです。

— rafaelmorais 2016年

これをcopy pasteリスナーと組み合わせると、ページの他の部分に悪影響を与えずに何かを貼り付けたりドラッグしたりするのではなく、ユーザーに入力を強制するのに最適なソリューションのようです。

— Daniel Bonnell

21

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

— icl7126
ソース

Chrome 59の魅力のように機能します

— カシラジャ2017年

1

これは、すべてのブラウザーでサポートされているJS以外の単純なHTML属性である、受け入れ済みの答えである必要があります。developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/ …

— クリス・

1

これが最良の答えです

— Argun

12

これはうまくいくかもしれません：テキスト、画像、そして基本的にすべてに対して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を使用してテキスト選択の強調表示を無効にする方法は？

— トッシュ
ソース

どうもありがとうございます。クリック可能にしたいdivが、ドラッグを無効にしたい。

— IonicăBizău

@IonicăBizăuクリック可能なものにしたい場合は、ボタンまたはタグを使用することをお勧めします。これは、マウスとタッチスクリーンのない特定のデバイスがこれらを認識し、ユーザーが選択できるようにするためです。

— Tosh

8

jQueryでは、次のようになります。

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

私の場合、ユーザーが入力にテキストをドロップできないようにするため、「マウスダウン」ではなく「ドロップ」を使用しました。

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

代わりに、event.preventDefault（）を使用してfalseを返すことができます。これが違いです。

そしてコード：

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

— ビクター・ロマーノ
ソース

2

これは、私のWebアプリケーションで常に使用するフィドルです。

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

アプリ上の何もドラッグアンドドロップできなくなります。ツアーのニーズに応じて、ボディセレクターを、子供がドラッグされるべきではないコンテナーに置き換えることができます。

— リス
ソース

0

これを試して

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

— クレイジージューン
ソース

0

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

@SyntaxErrorの回答を使用して、https： //stackoverflow.com/a/13745199/5134043

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

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

  return (
    <div ref={panelManagerBody}>

— クリスケート
ソース

0

ここでそのままにしておきます。私がすべてを試した後、私を助けました。

   $(document.body).bind("dragover", function(e) {
        e.preventDefault();
        return false;
   });

   $(document.body).bind("drop", function(e){
        e.preventDefault();
        return false;
   });

— チェックノフ
ソース

-1

このJQueryは私のために働きました：-

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

— ピユシュ
ソース