gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:25:58 24 4
gpt4 key购买 nike

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

然后在drop事件中从e.dataTransfer获取数据

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

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

最佳答案

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

关于javascript - 拖放 - 如何在 dragstart 事件和 drop 事件中获取实际的 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53986159/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com