将元素及其子元素从一页复制或保存和检索到另一页的方法?
Ways to copy or save and retrieve a element and it's children elements from one page to another?
我正在尝试生成一份关于用户在 div 元素内创建组件块(div 的)的报告。为此,我需要在最终报告中将附加组件显示为图像或 html 元素。
工作演示
我需要单独显示网格线的副本以及在其上创建的组件(div)。
ui.position
给出元素从页面顶部开始的位置,但我需要在父 div
标记内的位置。
$element.draggable({
containment: '#convas',
drag: function(event, ui) {
var resposition = ui.position;
console.log(resposition);
}
}).resizable({
containment: '#convas',
resize: function(event, ui) {
var resposition = ui.position;
console.log(resposition);
}
});
请建议我更好的方法来解决这种情况。
您可以使用 .position()
和 at
的相对像素寻址。
Defines which position on the element being positioned to align with the target element: "horizontal vertical"
alignment. A single value such as "right"
will be normalized to "right center"
, "top"
will be normalized to "center top"
(following CSS convention). Acceptable horizontal values: "left"
, "center"
, "right"
. Acceptable vertical values: "top"
, "center"
, "bottom"
. Example: "left top"
or "center center"
. Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%"
. Percentage offsets are relative to the element being positioned.
或者,如下所示,您可以使用 CSS 定位,其中父项是相对的,子项是绝对的。
假设您的数据正在以某种方式被检索,您可以创建一个函数来将元素放置在特定位置。这是一个例子。
$(function() {
var myItems = [{
id: "el-1",
label: "Administration",
position: {
top: 0,
left: 0
},
props: {
width: 90,
height: 90
}
},
{
id: "el-2",
label: "Canteen",
position: {
top: 0,
left: 102
},
props: {
width: 45,
height: 90
}
}, {
id: "el-3",
label: "Storage (Cold)",
position: {
top: 103,
left: 0
},
props: {
width: 90,
height: 25
}
}
];
function placeElem(dObj, $p) {
var item = $("<div>", {
id: dObj.id,
class: "placed draggable ui-widget-content",
width: dObj.props.width + "px",
height: dObj.props.height + "px"
}).html(dObj.label).appendTo($p);
item.css({
left: dObj.position.left + "px",
top: dObj.position.top + "px"
});
}
function getElPosition($el) {
var r = {
top: Math.round(parseInt($el.css("top").slice(0, -2))),
left: Math.round(parseInt($el.css("left").slice(0, -2)))
};
return r;
}
function log(h) {
$("#log").prepend(h);
}
function getJSON() {
// Get JSON data from Data Source and return it. Similar to 'myItems'
// Use placeElem() to load the data as eleemnts to page
}
function saveJSON() {
// Save JSON data, like myItems, to Data Source
// Iterate each element and use getElPosition() to build data
var items = $(".placed");
var data = [];
items.each(function(i, el) {
data.push({
id: $(el).attr("id"),
label: $(el).text().trim(),
position: getElPosition($(el)),
props: {
width: $(el).width(),
height: $(el).height()
}
});
});
var json = JSON.stringify(data);
console.log(data);
console.log(json);
}
$.each(myItems, function(key, item) {
log("<p>Adding " + item.id + ", left: " + item.position.left + ", top: " + item.position.top + "</p>");
placeElem(item, $("#containment-wrapper"));
var p = getElPosition($("#" + item.id));
log("<p>" + item.id + " position left: " + p.left + ", position top: " + p.top + "</p>");
});
$(".draggable").draggable({
containment: "parent",
start: function(e, ui) {
var p = getElPosition($(this));
log("<p>Drag Start " + $(this).attr("id") + " position left: " + p.left + ", position top: " + p.top + "</p>");
},
stop: function(e, ui) {
var p = getElPosition($(this));
log("<p>Drag Stop " + $(this).attr("id") + " position left: " + p.left + ", position top: " + p.top + "</p>");
}
});
});
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 0;
font-size: 0.65em;
}
#containment-wrapper {
width: 65%;
height: 300px;
border: 2px solid #ccc;
padding: 0;
position: relative;
}
#containment-wrapper .placed {
position: absolute;
background: #999;
}
h3 {
clear: left;
}
#log {
font-size: .5em
}
#log p {
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="containment-wrapper">
</div>
<div id="log"></div>
放置后,您将需要一个可以读取当前位置的函数。由于它位于相对定位的 div 内,因此 top
和 left
位置应该是您所需要的。
您的 post 没有说明您希望如何存储这些数据。如果是我,我会使用 SQL 数据库,但其他选项(如 Cookies 或 LocalStorage)也是替代方案。您需要一个加载和保存样式函数来将数据拉取和推送到它的数据源。
我正在尝试生成一份关于用户在 div 元素内创建组件块(div 的)的报告。为此,我需要在最终报告中将附加组件显示为图像或 html 元素。
工作演示
我需要单独显示网格线的副本以及在其上创建的组件(div)。
ui.position
给出元素从页面顶部开始的位置,但我需要在父 div
标记内的位置。
$element.draggable({
containment: '#convas',
drag: function(event, ui) {
var resposition = ui.position;
console.log(resposition);
}
}).resizable({
containment: '#convas',
resize: function(event, ui) {
var resposition = ui.position;
console.log(resposition);
}
});
请建议我更好的方法来解决这种情况。
您可以使用 .position()
和 at
的相对像素寻址。
Defines which position on the element being positioned to align with the target element:
"horizontal vertical"
alignment. A single value such as"right"
will be normalized to"right center"
,"top"
will be normalized to"center top"
(following CSS convention). Acceptable horizontal values:"left"
,"center"
,"right"
. Acceptable vertical values:"top"
,"center"
,"bottom"
. Example:"left top"
or"center center"
. Each dimension can also contain offsets, in pixels or percent, e.g.,"right+10 top-25%"
. Percentage offsets are relative to the element being positioned.
或者,如下所示,您可以使用 CSS 定位,其中父项是相对的,子项是绝对的。
假设您的数据正在以某种方式被检索,您可以创建一个函数来将元素放置在特定位置。这是一个例子。
$(function() {
var myItems = [{
id: "el-1",
label: "Administration",
position: {
top: 0,
left: 0
},
props: {
width: 90,
height: 90
}
},
{
id: "el-2",
label: "Canteen",
position: {
top: 0,
left: 102
},
props: {
width: 45,
height: 90
}
}, {
id: "el-3",
label: "Storage (Cold)",
position: {
top: 103,
left: 0
},
props: {
width: 90,
height: 25
}
}
];
function placeElem(dObj, $p) {
var item = $("<div>", {
id: dObj.id,
class: "placed draggable ui-widget-content",
width: dObj.props.width + "px",
height: dObj.props.height + "px"
}).html(dObj.label).appendTo($p);
item.css({
left: dObj.position.left + "px",
top: dObj.position.top + "px"
});
}
function getElPosition($el) {
var r = {
top: Math.round(parseInt($el.css("top").slice(0, -2))),
left: Math.round(parseInt($el.css("left").slice(0, -2)))
};
return r;
}
function log(h) {
$("#log").prepend(h);
}
function getJSON() {
// Get JSON data from Data Source and return it. Similar to 'myItems'
// Use placeElem() to load the data as eleemnts to page
}
function saveJSON() {
// Save JSON data, like myItems, to Data Source
// Iterate each element and use getElPosition() to build data
var items = $(".placed");
var data = [];
items.each(function(i, el) {
data.push({
id: $(el).attr("id"),
label: $(el).text().trim(),
position: getElPosition($(el)),
props: {
width: $(el).width(),
height: $(el).height()
}
});
});
var json = JSON.stringify(data);
console.log(data);
console.log(json);
}
$.each(myItems, function(key, item) {
log("<p>Adding " + item.id + ", left: " + item.position.left + ", top: " + item.position.top + "</p>");
placeElem(item, $("#containment-wrapper"));
var p = getElPosition($("#" + item.id));
log("<p>" + item.id + " position left: " + p.left + ", position top: " + p.top + "</p>");
});
$(".draggable").draggable({
containment: "parent",
start: function(e, ui) {
var p = getElPosition($(this));
log("<p>Drag Start " + $(this).attr("id") + " position left: " + p.left + ", position top: " + p.top + "</p>");
},
stop: function(e, ui) {
var p = getElPosition($(this));
log("<p>Drag Stop " + $(this).attr("id") + " position left: " + p.left + ", position top: " + p.top + "</p>");
}
});
});
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 0;
font-size: 0.65em;
}
#containment-wrapper {
width: 65%;
height: 300px;
border: 2px solid #ccc;
padding: 0;
position: relative;
}
#containment-wrapper .placed {
position: absolute;
background: #999;
}
h3 {
clear: left;
}
#log {
font-size: .5em
}
#log p {
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="containment-wrapper">
</div>
<div id="log"></div>
放置后,您将需要一个可以读取当前位置的函数。由于它位于相对定位的 div 内,因此 top
和 left
位置应该是您所需要的。
您的 post 没有说明您希望如何存储这些数据。如果是我,我会使用 SQL 数据库,但其他选项(如 Cookies 或 LocalStorage)也是替代方案。您需要一个加载和保存样式函数来将数据拉取和推送到它的数据源。