Javascript 如何将元素及其子元素从一个页面复制、保存和检索到另一个页面？

我试图生成一个用户在div元素中创建组件div块的报告。为此，我需要在最终报告中将附加的组件显示为图像或html元素

工作演示

我需要单独显示grildline的副本，以及上面创建的components div

position给出了元素在页面顶部的位置，但我需要在父div标记内的位置

$element.draggable{ 遏制：“convas”， 拖动：functionevent，ui{ var resposition=ui.position； 控制台。日志位置； } }.可调整大小{ 遏制：“convas”， 调整大小：functionevent，ui{ var resposition=ui.position； 控制台。日志位置； } }; 请给我建议一个更好的方法来解决这种情况。

您可以使用。位置与相对像素地址与at

定义要定位的图元上与目标图元对齐的位置：水平-垂直对齐。单个值（如right）将标准化为右中心，top将按照CSS约定标准化为中顶部。可接受的水平值：左、中、右。可接受的垂直值：顶部、中心、底部。示例：左上或中。每个维度也可以包含偏移，以像素或百分比为单位，例如右+10-25%。百分比偏移相对于要定位的图元

或者，如下图所示，您可以使用CSS定位，其中父对象是相对的，子对象是绝对的

假设正在以某种方式检索数据，则可以创建一个函数，将元素放置在特定位置。这里有一个例子

$function{ var myItems=[{ id:el-1， 标签：管理， 职位：{ 排名：0， 左：0 }, 道具：{ 宽度：90， 身高：90 } }, { id:el-2， 标签：食堂， 职位：{ 排名：0， 左：102 }, 道具：{ 宽度：45， 身高：90 } }, { id:el-3， 标签：冷藏， 职位：{ 排名：103， 左：0 }, 道具：{ 宽度：90， 身高：25 } } ]; 函数placeElemObj，$p{ 变量项=${ id:dObj.id， 类：放置可拖动的ui小部件内容， 宽度：dObj.props.width+px， 高度：dObj.props.height+px }.htmldObj.label.appendTo$p； item.css{ 左：dObj.position.left+px， 顶部：dObj.position.top+px }; } 函数getElPosition$el{ 变量r={ 顶部：Math.roundparseInt$el.csstop.slice0，-2， 左：Math.roundparseInt$el.cssleft.slice0，-2 }; 返回r； } 函数对数{ $log.prependh； } 函数getJSON{ //从数据源获取JSON数据并返回它。类似于“myItems” //使用placeElem将数据作为元素加载到页面 } 函数saveJSON{ //将JSON数据（如myItems）保存到数据源 //迭代每个元素并使用getElPosition构建数据 var项目=$已放置； var数据=[]； items.eachfunctioni，el{ 数据推送{ id:$el.attrid， 标签：$el.text.trim， 职位：getElPosition$el， 道具：{ 宽度：$el.width， 高度：$el.height } }; }; var json=json.stringifydata； 控制台日志数据； console.logjson； } $.eachmyItems、functionkey、item{ 日志添加+item.id+，左侧：+item.position.left+，顶部：+item.position.top+

； placeElemitem$容器包装； var p=getElPosition$+item.id； 日志+item.id+左位置：+p.left+，位置顶部：+p.top+

； }; $.draggable.draggable{ 遏制：家长， 开始：function，ui{ var p=getElPosition$this； log拖动Start+$this.attrid+位置left:+p.left+，位置top:+p.top+

； }, 停止：函数，用户界面{ var p=getElPosition$this； log拖动Stop+$this.attrid+位置左：+p.left+，位置顶部：+p.top+

； } }; }; .拖拉{ 宽度：90px； 高度：90px； 填充：0.5em； 浮动：左； 保证金：0； 字号：0.65em； } 安全壳包装{ 宽度：65%； 高度：300px； 边框：2个实心ccc； 填充：0； 位置：相对位置； } 安全壳包装。放置{ 位置：绝对位置； 背景：999； } h3{ 清除：左； } 日志{ 字体大小：.5em } 对数p{ 保证金：0； 填充：0； }

---

我假设您使用HTML5画布是因为convas。您可以将canva的内容导出为图像。这里的更多信息：不，这是一个id为convas@P.iakovakis的div标签。初始定位是由CSS完成的？是的，但用户也可以在创建后拖动并调整其大小@请提供一个更完整的例子。您可以使用.position，然后减去父对象的位置，或者尝试使用.of fset。