我已经在HTML和bootstrap中实现了一个网格系统。这些网格包含面板，它们携带各种信息。我使用jQuery和一些自定义的java脚本和引导程序使这些面板可移动（拖放）。
我需要在退出会话后退出每个项目的位置（退出）
这是我的代码
<div class="container sortable">
<div class="row"><!-- BEGIN ROW -->
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 1
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 2
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 3
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
</div><!-- END ROW -->
<div class="row"><!-- BEGIN ROW 1 -->
<div class="col-md-4 placeholder-wrapper"><!-- BEGIN WRAPPER -->
<div class="panel panel-default" id="portlet-linear-color"><!-- BEGIN PANEL -->
<div class="panel-heading"><!-- BEGIN HEADER -->
<div class="panel-title">
Portlet 4
</div>
<div class="panel-controls"><!-- BEGIN ICONS -->
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div><!-- END ICONS -->
</div><!-- END HEADER -->
<div class="panel-body"><!-- BEGIN PANEL CONTENT -->
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div><!-- END PANEL CONTENT -->
</div><!-- END PANEL -->
</div><!-- END WRAPPER -->
</div><!-- END ROW 2 -->
</div>
无论如何我可以将这些实例保存在数据库中吗？
答案 0 :(得分：0)
如果您想获取页面的当前html，请使用JQuery。 这会奏效。
<script>
var contentData = $('#divwithhtml').html();
//If you want to post it
$.post( "yoururl.php", { content: "contentData " })
.done(function( data ) {
alert( "Data Loaded: " + data + " posted html succesfull");
});
</script>
答案 1 :(得分：0)
我认为您可以在数据库中保存基本布局。然后每个客户端重新定位每个站点项，然后您应该通过ajax为clientId保存在数据库中的位置。
编辑后的帖子：
你可以像这样回复字符串代码非常简单：
select `columnName` from `database` where `clientId`=20
获取此返回查询并保存到$ row时，您可以尝试：
echo $row["columnName"];
OR
$ret="<!DOCTYPE html>
<html>
<head>
<title>site name</title>
</head>
<body>
{$row["columnName"]}
</body>
</html>";
echo $ret;