时间戳

首页 > 解决方案 > 拖放 - 如何在 dragstart 事件和 drop 事件中获取实际的 html

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

问题描述

在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.dataTransferdrop 事件中捕获数据

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

我最终得到了这个输出[object HTMLParagraphElement] ，现在，我尝试如何将它[object HTMLParagraphElement]转换为 UI 上可呈现的 HTML，.innerHTML and .outerHTML但它在屏幕上给了我未定义的相当正确的输出。

标签： javascriptangularhtmldrag-and-drophtml5-draggable

解决方案

在dragestart事件中使用这个

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

代替

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

在 drop 事件中，您将获得 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);

推荐阅读