Drag selection with Draggable Blocks

Input inside draggable elements has a problem in that you cannot drag select the text in the input.

by Ben Clayton

HTML

You can drag the yellow blocks, but also be able to drag select the text inside.
<div class="dragbox">

  <input value="drag selectable text" />

</div>



<div class="dragbox">

  <span class="dragbox">
    <input value="drag selectable text" />
  </span>

</div>


<div class="dragbox">

  <div class="dragbox">
      <div class="htmledit" contenteditable=true>drag selectable text</div>
  </div>

</div>

CSS

.dragbox {
  display: block;
  background-color: yellow;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid red;
}


.htmledit {
  padding:5px;
  background-color:white;
}

JavaScript

$(document).ready(function() {

  $(document).on('dragstart mousedown mouseup', "input,[contenteditable='true']", function(e) {
    e.stopPropagation();
    if (e.type == "dragstart") return;
    $(e.target).parents("[draggable]").attr("draggable", (e.type == "mouseup"));
  });


  $(".dragbox").each(function() {
    $(this).attr("draggable", true);
    $(this).on("dragstart", dragstartHDL);
  });


});



function dragstartHDL(e) {
  console.log("---DIV----");
  console.log("target", e.target);
  console.log("currentTarget", e.target);
}