Javascript 拖放-如何在dragstart事件和Drop事件中获取实际的html_Javascript_Angular_Html_Drag And Drop_Html5 Draggable

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

javascript angular html

Javascript 拖放-如何在dragstart事件和Drop事件中获取实际的html,javascript,angular,html,drag-and-drop,html5-draggable,Javascript,Angular,Html,Drag And Drop,Html5 Draggable,在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 +

在

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>

将数据从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]
现在，当我尝试.innerHTML和.outerHTML
时，我如何将这个[object HTMLParagraphElement]
转换为UI上的一个可呈现的HTML，但它在屏幕上给了我未定义的相当正确的输出。
我建议使用底层方法来完成这类工作
<!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>


功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
在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);

let sourceElement=event.dataTransfer.getData（“text/html”）；
let doc:any=new DOMParser（）.parseFromString（sourceElement，“text/html”）；
var clonedSourceHtmlElement:HTMLElement=（doc.firstChild.children[1].children[0]）.cloneNode（true）；
谢谢你，穆罕默德；但问题是，我的html中没有来自服务的id属性，这就是为什么我用另一种方法来搜索它，而不使用id。
  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);