拖放-如何在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]現在，當我嘗試使用.innerHTML and .outerHTML ，如何將[object HTMLParagraphElement]轉換為UI上可顯示的HTML，但它給了我在屏幕上未定義的正確輸出。

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

問題描述

2 個解決方案

解決方案1
0 2018-12-31 10:43:40

解決方案2
0 已采納 2019-01-02 14:22:22

拖放-如何在dragstart事件和drop事件中獲取實際的html

問題描述

2 個解決方案

解決方案1 0 2018-12-31 10:43:40

解決方案2 0 已采納 2019-01-02 14:22:22

解決方案1
0 2018-12-31 10:43:40

解決方案2
0 已采納 2019-01-02 14:22:22