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

我正在建立一個網站，允許用戶創建一個HTML頁面，然後可以在另一個網站上保存和共享。我希望他們能夠調整大小並拖動頁面元素。我可以使用jQuery來做到這一點，但我不確定我如何保存這些信息，以便在其他地方查看頁面時，它看起來是一樣的。如何保存可拖動和可調整大小的元素的位置？

我還沒有決定如何存儲頁面信息，但我的想法是，我可以將每個元素與其絕對位置及其內容一起存儲在數據庫中。這聽起來像是一個好計劃嗎？

如果是這樣，我如何獲得div的位置傳遞給PHP，以便它可以被保存？

謝謝。

來源

2011-03-14 Sharon

jQueryUI的可調整大小有一個名爲resize，您可以使用一個事件：

var resposition = ''; 

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

同樣與jQueryUI的可拖動和事件drag發生：

var dragposition = ''; 

$('#divdrag').draggable({ 
    // options... 
    drag: funciton(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);

最後，兩個變量都應該是具有頂部屬性和左側屬性的數組：

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

來源

2011-03-14 21:37:31

由於html元素位置的細節，這是有幫助的。我在保存頁面時如何保存這些位置？讓我們假設用戶做了這一切，然後點擊「保存」...我如何讓表單傳遞位置和大小元素？ – Sharon 2011-03-14 22:03:42

@Sharon我編輯自己的答案。我希望它可以幫助你:) – 2011-03-14 22:12:50

謝謝，這使得它更清晰。會放棄它！再次感謝，我非常感謝你的幫助。 – Sharon 2011-03-15 21:48:14

您必須在某個位置保存位置，以便您可以在下次打開頁面時獲得位置的詳細信息。

選項1：你可以存儲在「localStorage的」，其默認瀏覽器存儲的html元素的位置的詳細信息。 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>

選項2：可以存儲在「數據庫」

來源

2017-04-26 14:55:11

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

回答

相關問題