Drag and Drop - How to get the actual html in dragstart event and drop event

Question

On dragstart event I want to get the actual html of dragged element. But when I do something like this in a dragstart event console.log( e.target); it give me the output like this as expected;

<p style="margin-right:72.45pt; margin-left:50.15pt; text-align:center; font-size:16pt" draggable="true"><strong>CONSULTING AND TECHNICAL SERVICES + (CATS+)</strong></p>

but this code console.log(JSON.stringify(e.target)); give me output like this ;

{"__zone_symbol__dragstartfalse":[{"type":"eventTask","state":"running","source":"HTMLParagraphElement.addEventListener:dragstart","zone":"angular","runCount":2}]}

when send data from dragstart to drop event like this

 e.dataTransfer.setData('Id', e.target);

and then catch data from e.dataTransfer in drop event

 let sourceElement = event.dataTransfer.getData("Id");
    console.log((sourceElement).innerHTML);
    console.log((sourceElement).outerHTML);

I end up with this output [object HTMLParagraphElement] Now , how I convert this [object HTMLParagraphElement] into a presentable HTML on UI as I tried .innerHTML and .outerHTML but it gives me undefined on screen rather proper output.

score 2 · Accepted Answer · answered Jan 02 '19 at 14:22

In dragestart event use this

e.dataTransfer.setData('text/html', e.currentTarget.outerHTML);

Instead of

e.dataTransfer.setData('Id', e.target);

While in drop event you will get the HTML string. Convert that string into an HTML element as follow

  let sourceElement = event.dataTransfer.getData("text/html");
    let doc: any = new DOMParser().parseFromString(sourceElement, "text/html");
    var clonedSourceHtmlElement: HTMLElement = <HTMLElement>(<HTMLElement>doc.firstChild.children[1].children[0]).cloneNode(true);

score 0 · Answer 2 · answered Dec 31 '18 at 10:43

I would suggest the bottom approach to do this type of things.

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Thank you Muhammad ; but the problem is that I don't have the id attribute in my html which comes from a service , that's why I am searching the other way to get it without ID. — Nisar Ahmad, Dec 31 '18 at 10:56

Drag and Drop - How to get the actual html in dragstart event and drop event

2 Answers2