CODEWITHSUNDEEP
javascriptcss
Blank
Blank

Reputation: 7208

Disable Drag and Drop on HTML elements?

I'm working on a web application for which I'm attempting to implement a full featured windowing system. Right now it's going very well, I'm only running into one minor issue. Sometimes when I go to drag a part of my application (most often the corner div of my window, which is supposed to trigger a resize operation) the web browser gets clever and thinks I mean to drag and drop something. End result, my action gets put on hold while the browser does its drag and drop thing.

Is there an easy way to disable the browser's drag and drop? I'd ideally like to be able to turn it off while the user is clicking on certain elements, but re-enable it so that users can still use their browser's normal functionality on the contents of my windows. I'm using jQuery, and although I wasn't able to find it browsing the docs, if you know a pure jQuery solution it would be excellent.

In short: I need to disable browser text selection and drag-and-drop functions while my user has the mouse button down, and restore that functionality when the user releases the mouse.

Upvotes: 152

Views: 297455

Answers (13)

Tosh
Tosh

Reputation: 1857

This might work: You can disable selecting with css3 for text, image and basically everything.

.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;
}

Of course only for the newer browsers. For more details check:

How to disable text selection highlighting

Note: there are obvious a few UX downsides to this since it prevents users from easily copying text, be aware of this.

Upvotes: 15

Tanima
Tanima

Reputation: 51

You can simply use draggable="false" on the element itself, else you can put

on-mousedown="preventDefaultDrag"
...
preventDefaultDrag: function(ev) {
   ev.preventDefault();
},

Upvotes: 0

Juraj
Juraj

Reputation: 6648

You can disable dragging simply by using draggable="false" attribute.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable http://www.w3schools.com/tags/att_global_draggable.asp

Upvotes: 59

Onyedikachi Oko - Dexter
Onyedikachi Oko - Dexter

Reputation: 460

Question is old, but it's never too late to answer.

$(document).ready(function() {
  //prevent drag and drop
  const yourInput = document.getElementById('inputid');
  yourInput.ondrop = e => e.preventDefault();

  //prevent paste
  const Input = document.getElementById('inputid');
  Input.onpaste = e => e.preventDefault();
});

Upvotes: 0

SyntaxError
SyntaxError

Reputation: 3859

This works. Try it.

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

Upvotes: 275

Lis
Lis

Reputation: 624

This is a fiddle I always use with my Web applications:

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

It will prevent anything on your app being dragged and dropped. Depending on tour needs, you can replace body selector with any container that childrens should not be dragged.

Upvotes: 4

checknov
checknov

Reputation: 11

I will just leave it here. Helped me after I tried everything.

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

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

Upvotes: 1

kriskate
kriskate

Reputation: 317

using @SyntaxError's answer, https://stackoverflow.com/a/13745199/5134043

I've managed to do this in React; the only way I could figure out was to attach the ondragstart and ondrop methods to a ref, like so:

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

  return (
    <div ref={panelManagerBody}>

Upvotes: 0

Titukedo
Titukedo

Reputation: 960

For input elements, this answer works for me.

I implemented it on a custom input component in Angular 4, but I think it could be implemented with pure JS.

HTML

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

Component definition (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}

Upvotes: 0

Piyush
Piyush

Reputation: 7

This JQuery Worked for me :- 

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

Upvotes: -1

crazyjune
crazyjune

Reputation: 359

try this

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

Upvotes: 1

Victor Romano
Victor Romano

Reputation: 187

With jQuery it will be something like that:

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

In my case I wanted to disable the user from drop text in the inputs so I used "drop" instead "mousedown".

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

Instead event.preventDefault() you can return false. Here's the difference.

And the code:

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

Upvotes: 11

Sergey Ilinsky
Sergey Ilinsky

Reputation: 31545

Try preventing default on mousedown event:

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

or

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

Upvotes: 96

Related Questions