Disable Drag and Drop on HTML elements

Question

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

User · Answer

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 using CSS

User · Answer

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 lt HTMLDivElement gt       useEffect      gt        if  panelManagerBody current          panelManagerBody current ondragstart        gt  false        panelManagerBody current ondrop        gt  false              panelManagerBody       return        lt div ref  panelManagerBody  gt

User · Answer

Try preventing default on mousedown event    lt div onmousedown  event preventDefault   event preventDefault     event returnValue   false  gt asd lt  div gt    or   lt div onmousedown  return false  gt asd lt  div gt

User · Answer

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

User · Answer

This JQuery Worked for me  -     document  ready function           con image   on  mousedown   function e          e preventDefault

User · Answer

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

User · Answer

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

User · Answer

You can disable dragging simply by using draggable  false  attribute  http   www w3schools com tags att global draggable asp

User · Answer

try this      id   on  mousedown   function event       event preventDefault

User · Answer

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   gt  e preventDefault         prevent paste   const Input   document getElementById  inputid      Input onpaste   e   gt  e preventDefault

User · Answer

This works  Try it   lt BODY ondragstart  quot return false  quot  ondrop  quot return false  quot  gt

User · Answer

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   lt input type  text    ngModel    value   ondragenter   disableEvent  event     dragover   disableEvent  event    ondrop   disableEvent  event    gt    Component definition  JS    export class CustomInputComponent         component construction and attribute definitions    disableEvent event        event preventDefault        return false

[javascript] Disable Drag and Drop on HTML elements?

Examples related to javascript

Examples related to css