148

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.

Improve this question
1
  • 3
    i would promote that @SyntaxError's answer (below, 100+ votes) should be the selected answer, as it does not affect non-drag operations.
    – wilson0x4d
    Mar 23, 2017 at 16:57

13 Answers 13

Reset to default
270

This works. Try it.

<BODY ondragstart="return false;" ondrop="return false;">
Improve this answer
1
  • This disables drag, but unfortunately, it still doesn't let you drag-select text regions starting from the middle of the link text.
    – Dave Dopson
    Nov 28, 2021 at 6:06
96

Try preventing default on mousedown event:

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

or

<div onmousedown="return false">asd</div>
Improve this answer
2
  • 2
    +1 - however, this has the unfortunate side-effect in Firefox (6.0 and lower) where it prevents the :active pseudo-class being applied to the element. This means I can't really use it for my links.
    – Andy E
    Oct 6, 2011 at 11:28
  • It also kills ALL mousedown events on that element. In my case I had an input box that I didn't want to be draggable, but doing this killed the ability to give it focus with one click.
    – Jim
    Sep 7, 2022 at 20:27
51

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

Improve this answer
2
  • 1
    seems widely supported according to caniuse.com/mdn-api_htmlelement_draggable -- so this should be the accepted answer
    – roberkules
    Aug 18, 2022 at 3:16
  • Sometimes you do not control the element in question, and thus cannot add any attributes. So this answer isn't universal unfortunately. However very handy when usable. On the other hand, preventDefault() in the bubbling/capturing event solves the issue whatever the circumstances.
    – Kostiantyn Ko
    May 19, 2023 at 18:14
15

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.

Improve this answer
2
  • Thank you so much. I want a click-able div, but with drag disabled.
    – Ionică Bizău
    Oct 17, 2012 at 14:34
  • @Ionică Bizău If you want to make things clickable it's better to use a button or a tag, since certain devices without mouses and touchscreens will recognise these and make them selectable for users.
    – Tosh
    Aug 22, 2014 at 7:27
11

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;
  });
});
Improve this answer
0
4

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.

Improve this answer
1

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;
   });
Improve this answer
0

try this

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

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;
  }
}
Improve this answer
0

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}>
Improve this answer
0

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();
});
Improve this answer
0

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

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

This JQuery Worked for me :- 

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.