gpt4 book ai didi

jquery-ui - 如何保存可拖动元素和可调整大小元素的位置?

转载 作者:行者123 更新时间:2023-12-03 08:11:06 25 4
gpt4 key购买 nike

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

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

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

谢谢。

最佳答案

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;
}
});
respositiondragposition将是数组。您可以在这里看到它的工作方式: http://jsbin.com/uvuzi5

编辑:使用表格,您可以将 dragpositionresposition保存到隐藏的输入中
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

关于jquery-ui - 如何保存可拖动元素和可调整大小元素的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5304276/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com