拖放 - 如何在 dragstart 事件和 drop 事件中获取实际的 html

Question

在 dragstart 事件中，我想获得拖动元素的实际 html。但是当我在 dragstart 事件中做这样的事情时 console.log( e.target); 它按预期给了我这样的输出；

<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>

但是这段代码 console.log(JSON.stringify(e.target)); 给我这样的输出；

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

当从 dragstart 发送数据到 drop 事件时，像这样

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

然后在放置事件

中从 e.dataTransfer 捕获数据

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

我最终得到这个输出 [object HTMLParagraphElement] 现在，我如何在 UI 上将此 [object HTMLParagraphElement] 转换为可呈现的 HTML，因为我尝试 .innerHTML and .outerHTML 但它在屏幕上给了我 undefined比较合适的输出。

Answer 1

我建议使用底部方法来做这类事情。

<!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>

Answer 2

在 dragestart 事件中使用此

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

而不是

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

在掉落事件中，您将获得 HTML 字符串。将该字符串转换为 HTML 元素，如下所示

  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);

拖放 - 如何在 dragstart 事件和 drop 事件中获取实际的 html

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

javascript

angular

html

drag-and-drop

html5-draggable