Drag and Drop - Как получить актуальный HTML-код в событии dragstart и drop - PullRequest
Новая
       17

Drag and Drop - Как получить актуальный HTML-код в событии dragstart и drop

0 голосов
/ 31 декабря 2018

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

Iв итоге получим [object HTMLParagraphElement] Теперь, как я конвертирую [object HTMLParagraphElement] в презентабельный HTML на пользовательском интерфейсе, как я пытался .innerHTML and .outerHTML, но это дает мне undefined на экране, а вывод достаточно правильный.

Ответы [ 2 ]

0 голосов
/ 02 января 2019

В 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);
0 голосов
/ 31 декабря 2018

Я бы предложил нижний подход для такого рода вещей.

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