如何保存可拖动&可调整大小的元素? [英] How do I save the position of draggable & resizeable elements?

问题描述

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

I'm building a site which allows users to create an html page which can then be saved and shared on another site. I want them to be able to resize and drag the page elements. I can do this using jQuery, but I'm not sure how I then save that so that when the page is viewed elsewhere, it looks the same.

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

I haven't decided yet how to store the page info, but what I'm thinking is that I can store each element in the database along with its absolute position, and its contents. Does that sound like a good plan?

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

If so, how do I get the position for the div to pass to the php so that it can be saved?

谢谢.

推荐答案

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

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

var resposition = '';

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

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

The same occurs with JQueryUI Draggable and its event drag:

var dragposition = '';

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

resposition和dragposition将是数组.您可以在这里看到它的工作方式: http://jsbin.com/uvuzi5

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

使用表格，您可以将dragposition和resposition保存到隐藏的输入中

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

然后在您的PHP文件中处理以下形式:

And in your PHP file to handle the form:

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

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

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

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

这篇关于如何保存可拖动&可调整大小的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！