6

我正在构建一个站点，该站点允许用户创建一个 html 页面，然后可以将其保存并在另一个站点上共享。我希望他们能够调整和拖动页面元素。我可以使用 jQuery 来做到这一点，但我不确定如何保存它，以便在其他地方查看页面时，它看起来是一样的。

我还没有决定如何存储页面信息，但我想的是我可以将每个元素连同它的绝对位置和它的内容一起存储在数据库中。这听起来像是一个好计划吗？

如果是这样，我如何让 div 的位置传递给 php 以便保存？

谢谢。

4

2 回答 2

14

JQueryUI Resizable 有一个名为的事件resize，您可以使用它：

var resposition = '';

$('#divresize').resizable({
   //options...
   resize: function(event,ui){
      resposition = ui.position;
   }
});

JQueryUI Draggable 及其事件也会发生同样的情况drag：

var dragposition = '';

$('#divdrag').draggable({
   // other options...
   drag: function(event,ui){
      dragposition = ui.position;
   }
});

resposition并且dragposition将是数组。你可以看到它在这里工作：http: //jsbin.com/uvuzi5

编辑：使用表单，您可以保存dragposition并resposition进入隐藏输入

var inputres = '<input type="hidden" id="resposition" value="'+resposition.left+','+resposition.top+'"/>'
$('#myform').append(inputres);
var inputdrag = '<input type="hidden" id="dragposition" value="'+dragposition.left+','+dragposition.top+'"/>'
$('#myform').append(inputdrag);

并在您的 PHP 文件中处理表单：

$dragposition = $_GET['dragposition'];
$resposition = $_GET['resposition'];
$dragposition = explode(',',$dragposition);
$resposition = explode(',',$resposition);

最后，两个变量都应该是具有 top 和 left 属性的数组：

$dragposition => [top,left] attributes from draggable
$resposition => [top,left] attributes from resizable
于 2011-03-14T21:37:31.160 回答
1

您必须在某个位置保存位置，以便下次打开页面时可以获取位置详细信息。

选项 1：您可以将 html 元素位置详细信息存储在其默认浏览器存储的“localStorage”中。 示例： 演示

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Dashboard</title>
    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="dist/css/jquery-ui.min.css">
    <script src="dist/js/jquery-ui.min.js"></script>
</head>

<body>
    <script>
        var positions = JSON.parse(localStorage.positions || "{}");
        $(function() {
            var d = $("[id=draggable]").attr("id", function(i) {
                return "draggable_" + i
            })
            $.each(positions, function(id, pos) {
                $("#" + id).css(pos)
            })

            d.draggable({
                containment: "#wrapper",
                scroll: false,
                stop: function(event, ui) {
                    positions[this.id] = ui.position
                    localStorage.positions = JSON.stringify(positions)
                }
            });
        });
    </script>
    <div id="wrapper">
        <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div1</div>
        <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div2</div>
        <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div3</div>
    </div>
</body>

</html>

选项 2：您可以将 html 元素位置详细信息存储在“您的数据库”中

于 2017-04-26T14:55:11.937 回答