如何保存可拖动和可拖动的位置可调整大小的元素？

发布于 2024-10-21 19:19:03 字数 251 浏览 3 评论 0原文

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

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

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

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

土豪我们做朋友吧 2024-10-28 19:19:03

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

JQueryUI Resizable has an event called resize that you can use:

var resposition = '';

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

The same occurs with JQueryUI Draggable and its event drag:

var dragposition = '';

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

resposition and dragposition is going to be arrays. You can see it working here: http://jsbin.com/uvuzi5

EDIT: using a form, you can save dragposition and resposition into hidden inputs

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);

And in your PHP file to handle the form:

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

Finally, both variables should be arrays with top and left attributes:

$dragposition => [top,left] attributes from draggable
$resposition => [top,left] attributes from resizable

回复收藏 0 原文

怎会甘心 2024-10-28 19:19:03

你必须在某个地方保存位置，这样你才能获得位置
下次打开页面时详细信息。

选项 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 元素位置详细信息存储在“您的数据库”中

you have to save position at some where so that you can get position
details when next time you open page.

option 1: you can store html elements position details in "localStorage" its default browser storage.
Example: Demo

<!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>

option 2: you can store html elements position details in "your database"

回复收藏 0 原文

~没有更多了~