2

When I use chrome, any selected text in an input or a text box can be dragged and dropped into another input/textarea. Is there any way to disable dragging of selected text?

Shirley Rozenboim
  • 299
  • 1
  • 4
  • 11
  • Possible duplicate of [Disable Drag and Drop on HTML elements?](https://stackoverflow.com/questions/704564/disable-drag-and-drop-on-html-elements) – tylerwgrass Feb 05 '18 at 23:49
  • 1
    Do you want to allow your users to select the text in the first place? It might be easier to prevent selection, rather than explicit actions. Though in either case I have to wonder, if only rhetorically, why you appear to hate your users in this way? – David Thomas Feb 06 '18 at 00:10
  • @DavidThomas Just curious why you would make the presumption that she hates her users? Perhaps it's a user requirement. Not all the time, but I typically focus on the _how_ rather than the _why_ of the OP's question. – user9263373 Feb 06 '18 at 00:20
  • 1
    @user9263373: "*I...wonder, if only rhetorically...*" I don't assume that the OP genuinely hates her users, I use that as - quite literally - a rhetorical device to express my own frustrations, as a user, with such intrusions into the way I use a website. While I do think of the *how* something may be accomplished (and have nothing to add that isn't already covered in the existing answers), asking *why* often yields a better understanding of what is required, which informs the *how* in order to provide a better answer for the OP. – David Thomas Feb 06 '18 at 00:25
  • @DavidThomas I did realize your question was rhetorical and your response to me is a perfectly valid answer. I guess my initial reaction felt your wording was somewhat off-putting when I initially read it. – user9263373 Feb 06 '18 at 00:40
  • Possible duplicate of [Prevent dragging and dropping text selections between inputs](https://stackoverflow.com/questions/46071847/prevent-dragging-and-dropping-text-selections-between-inputs) – Prateek Nov 17 '18 at 19:51

2 Answers2

7

document.getElementById("test").addEventListener("dragstart", function(evt){
  evt.preventDefault();
});
<input id="test" type="text" value="Drag text into textarea">
<br>
<textarea></textarea>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • @ShirleyRozenboim just an FYI, while this code prevents dragging, it doesn't prevent, cutting, copying and pasting with keyboard events and/or mouse events. Event listeners need to be added for those as well. You can test this with the solution I provided for a complete answer or add the event listeners in addition to this accepted answer. – user9263373 Feb 06 '18 at 01:20
  • 1
    I was only concerned about dragging and dropping, not other event listeners. Thanks for the help though! – Shirley Rozenboim Feb 08 '18 at 00:51
1

Bind the cut, copy and paste events to the <input> box and prevent default actions.

Update

I also bound dragstart to #Textbox1 and now this also prevents dragging text from this input into another input. I verified this using Chrome.

$(document).ready(function() {
  $('#TextBox1').on('copy paste cut dragstart',function(e) { 
    e.preventDefault(); //disable cut,copy,paste
    console.log('cut,copy & paste options are disabled !!');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="TextBox1" placeholder="Can't cut this!" /><br />
<input type="text" id="TextBox2" />
user9263373
  • 1,054
  • 8
  • 15
  • This didn't solve my problem. If you run the code snippet, type in some text into the input, select all of it, and drag it (For example, select all text and drag into URL bar), the text is still draggable. I am trying to prevent this behavior. – Shirley Rozenboim Feb 05 '18 at 23:38
  • Yep, you're right. It does prevent cut/copy/paste with keyboard events but not when dragging dropping... interesting. I'll see what else I can come up with. – user9263373 Feb 05 '18 at 23:46