van an nguyen

Drag and drop a text selection

Drag and drop a text selection

drag and drop text selection

There is no need to add a dragstart handler on an element that contains text. Any selected text is automatically added to the clipboard with a name/key equal to “text/plain”. Just add a drop event handler on the drop zone and fetch the data from the clipboard using “text/plain” as the access key:

  1. function drop(target, event) {
  2.    event.preventDefault();
  3.    target.innerHTML = event.dataTransfer.getData(‘text/plain’);
  4. };

Example: select some text and drag and drop the selection in the drop zone

Try it in your browser below (select text, then drag and drop it into the drop zone) or play with it at CodePen:

https://codepen.io/w3devcampus/embed/vNYXyR?user=w3devcampus&default-tab=result&slug-hash=vNYXyR&theme-id=0&height=359&name=cp_embed_1

Complete source code from the example:

  1. <html lang=”en”>
  2. <head>
  3. <style>
  4.    .box {
  5.       border: silver solid;
  6.       width: 256px;
  7.       height: 128px;
  8.       margin: 10px;
  9.       padding: 5px;
  10.       float: left;
  11.    }
  13.    .notDraggable {
  14.       user–select: none;
  15.    }
  16. </style>
  18.     function drop(target, event) {
  19.        event.preventDefault();
  20.        target.innerHTML = event.dataTransfer.getData(‘text/plain’);
  21.     };
  23. </head>
  24. <body>
  25. <p id=“text”>
  26.     <b>Drag and drop a text selection from this paragraph</b>. Drag and drop any
  27.     part of this text to
  28.     the drop zone. Notice in the code: there is no need for a dragstart handler in case of
  29.     text selection:
  30.     the text is added to the clipboard when dragged with a key/name equal to “text/plain”.
  31.     Just write a
  32.     drop handler that will do an event.dataTransfer.getData(“text/plain”) and you are
  33.     done!
  34.  </p>
  36. <p class=“notDraggable”>
  37.      This paragraph is not selectable however. Look at the CSS in the source code.
  38. </p>
  40.  class=“box” ondragover=“return false“ ondrop=“drop(this, event)“>
  41.      

    Drop some text selection here.

  • </body>
  • </html>

    • Here, we use a CSS trick to make the second paragraph non-selectable, by setting the user-selected property to none.

    In the next chapter of Week 3, we will see how to drag and drop files!