Drag dataTransfer Element styling dragged item

Play with dragging object

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" draggable="true">

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

</div>
<div class="drop">

</div>
<div class="drop">

</div>



<img id="dragimage" style="position:absolute;top:-300px;" src="https://cdn4.buysellads.net/uu/1/68422/1594301830-Buildkite_CarbonCreative.png" alt="ads via Carbon" border="0" style="max-width: 130px;">

CSS

.dragbox {
  display: block;
  background-color: yellow;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid red;
  -webkit-user-drag: element;
  -webkit-user-select: none;
}

.dragbox .dragbox {
  background-color: cyan;
}


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

.drop {
  display: inline-block;
  background-color: pink;
  margin: 10px;
  border: 1px solid red;
  width: 40%;
  height:60px;
}

[data-fred="1"] {
  position: absolute;
  opacity: 0.4;
  xtop: -4000px;
}

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"));
  });
  */
  function test() {
    var testVar = window.DataTransfer || window.Clipboard; // Clipboard is for Chrome
    if ("setDragImage" in testVar.prototype) {
      console.log("setDragImage supported");
    } else {
      console.warn("setDragImage not supported");
    }
  }

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

	$('.drop').on("dragover", dragoverHDL);
	test();

});
var dragghost;

function dragoverHDL(e) {
  console.log("---DIV----");
  console.log("target", e.target);
  e.stopPropagation();
  dragghost.style.width = e.target.offsetWidth + "px";
  dragghost.style.transform = "scale(0.5)"
  //debugger
	//e.originalEvent.dataTransfer.setDragImage(dragghost, 0,0);
  //console.log(e.originalEvent.dataTransfer.getDragImage())
}

function dragendHDL(e) {
  console.log("---DIV----");
  console.log("target", e.target);
  e.stopPropagation();
  document.body.removeChild(dragghost);
  dragghost = null;
}

function dragstartHDL1(e) {
  console.log("---DIV----");
  console.log("target", e.target);
  e.stopPropagation();
  dragghost = this.cloneNode(true);
  document.body.appendChild(dragghost);
  //crt.className("ghost");
  dragghost.dataset.fred=1;
  //debugger;
  dragghost.style.backgroundColor = "red";
  dragghost.style.opacity = "0.4";
  dragghost.style.width = "50%";
  dragghost.style.transform = "scale(0.4)";
  
  var el = document.createElement('div');
  // and give it some content 
  const newContent = document.createTextNode("DRAGGER"); 
  // add the text node to the newly created div
  el.appendChild(newContent);  
  // Give it to the drag object
 ...