有没有办法在 Angular 中的 Bowser 选项卡之间移动 HTML？

问题描述 投票：0回答：1

我正在尝试构建一个 Angular (v17) 应用程序，它允许用户通过拖放 HTML 元素来移动，甚至可以在多个浏览器选项卡之间移动。与 neo.mjs 的功能类似（这里有一个演示：https://www.youtube.com/watch?v=-L43hntj3jk）。

我目前正在使用 Material cdDrag，并考虑为此编写一个自定义 Angular 共享 Web Worker，但即使可能，也会非常困难。

是否有更简单的方法，甚至是第 3 方包可以实现此目的？或者我可以以某种方式将 neo.mjs 实现到我的 Angular 应用程序中吗？

该项目必须是 Angular（客户要求）。

javascript html angular drag-and-drop
1个回答
0
投票

其实没那么复杂。在此示例中，我有一个可拖动的 

<li>
元素和一个 iframe（iframe 只是为了表明您可以从一个文档拖动到另一个文档）。在父文档中，在 
dragstart
上，我将 dataTransfer 对象上的数据设置为正在拖动的 HTML 代码（
<li>
元素）。在 iframe 中，有 
dragover
和 
drop
的处理程序。当您放下 
<li>
时，HTML 将被添加到 iframe 中的 
<ul>
中。以下是 iframe 的 HTML。

您可以尝试在单独的选项卡中打开 iframe 文档（数据 URI 字符串），并测试是否可以将此处示例中的 

<li>
拖动到该选项卡。

document.querySelector('ul').addEventListener('dragstart', e => {
  e.dataTransfer.setData("text/html", e.target.outerHTML);
});
body {
  display: flex;
}
<ul>
  <li draggable="true">Item 1</li>
  <li draggable="true">Item 2</li>
</ul>

<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHNjcmlwdD4KZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsIGUgPT4gewogIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ3VsJykuYWRkRXZlbnRMaXN0ZW5lcignZHJhZ292ZXInLCBlID0+IHsKICAgIGUucHJldmVudERlZmF1bHQoKTsKICAgIGUuZGF0YVRyYW5zZmVyLmRyb3BFZmZlY3QgPSAibW92ZSI7CiAgfSk7CgogIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ3VsJykuYWRkRXZlbnRMaXN0ZW5lcignZHJvcCcsIGUgPT4gewogICAgZS5wcmV2ZW50RGVmYXVsdCgpOwogICAgZS50YXJnZXQuaW5uZXJIVE1MICs9IGUuZGF0YVRyYW5zZmVyLmdldERhdGEoInRleHQvaHRtbCIpOwogIH0pOwp9KTsKPC9zY3JpcHQ+CjxzdHlsZT4KdWwge21pbi1oZWlnaHQ6IDNlbTsgYm9yZGVyOiB0aGluIGRvdHRlZCBncmF5O30KPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KPGRpdj5Ecm9wIHpvbmU6PC9kaXY+Cjx1bD4KPC91bD4KPC9ib2R5Pgo8L2h0bWw+"></iframe>

iframe 文档：

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', e => {
  document.querySelector('ul').addEventListener('dragover', e => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
  });

  document.querySelector('ul').addEventListener('drop', e => {
    e.preventDefault();
    e.target.innerHTML += e.dataTransfer.getData("text/html");
  });
});
</script>
<style>
ul {min-height: 3em; border: thin dotted gray;}
</style>
</head>
<body>
<div>Drop zone:</div>
<ul>
</ul>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.