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

Question

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

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

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

谢谢.

Answer 1

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