将 HTML 控件从一个页面移动到另一个页面答案

【问题标题】：Moving HTML controls from one page to other将 HTML 控件从一个页面移动到另一个页面
【发布时间】：2017-03-29 12:37:32
【问题描述】：

我正在开发一个有 4 个选项卡式视图（单独的 HTML 页面）的项目。这些视图中的每一个都有一堆使用 d3.js 实现的 SVG 图表。现在客户想要一个可以剪切&粘贴/移动图表的功能选项卡式视图到另一个。实现这一目标的最佳方法是什么？我已经使用 interact.min.js 在页面限制内调整大小和拖动/移动图表。

此项目为离线格式，即不使用任何服务器端语言。您的所有建议都应考虑到这一点。目前所有视图都是通过单击本地文件系统中存在的文件夹中的 html 页面启动的。

【问题讨论】：

我认为这些工具不会有这样的功能。您需要做的可能是创建一个“导出控件”按钮，该按钮将序列化控件并将其存储在浏览器或会话 cookie 中，然后创建一个“导入控件”按钮，该按钮将收集该 cookie 信息并将其放在新页面上控制列表的底部，可以正常拖动到该位置。
@Forklift 认为交互性是客户端的关键，但仍然在后台使用导出/导入逻辑可以帮助我实现目标！！！
您可以考虑为每个控件添加一个右键单击上下文，包括“发送到第 1 页、发送到第 2 页等”，这将自动触发导出、重定向和导入操作以及所有客户需要从那里拖到首选地点。或者右键单击 -> 导出，它会弹出一个向导，选择哪个页面以及是顶部还是底部。
@Forklift 值得向某个方向移动的解决方案！！！！！！

标签： javascript jquery html d3.js svg

【解决方案1】：

我认为这可能会对您有所帮助。您可以将整个 HTML1 替换为 HTML2 选项卡，反之亦然。

HTML

<div id="div1"> HULK </div>

<div id="div2">THOR </div>

<input class="button" type="button" value="Replace THOR with HULK">

JQUERY

$(".button").click(function(){
$('#div2').replaceWith($('#div1').html());
})

这只是一个可以帮助你思考的想法。

JS Fiddle Demo

【讨论】：

问题是要移动的 div 可能在不同的页面上，所以你的解决方案根本不起作用。这仅适用于 DOM 中存在的对象，它们不适用于用户不在的页面。
我只是给出了这个想法，同样的概念将用于 page ，您必须将该 HTML 临时保存在其他地方。就像你说的那样。
@AmiteshKumar .当跨越页面边界时应用会很困难，我们甚至无法预先假设正在移动的图表的目标着陆点是什么！顺便说一句，欢迎您的建议！！