jquery-ui對話框（通過php保存位置） - 只適用於.draggable不.dialog

Question

我試圖將我的jquery-ui對話框的用戶位置+大小存儲到mysql數據庫中。我試着在這裏閱讀手冊：https://api.jqueryui.com/1.10/dialog/，並沒有如何做到這一點的文件。我的代碼下面的問題是$ data = json_decode（$ _ POST [「data」]）;在savelayout.php中返回NULL。

編輯：我能得到的座標通過PHP後存儲到MySQL這樣，但他們總是相同的大小3.078125和38.453125。 alert(JSON.stringify(order));總是輸出相同的座標爲好，儘管使用var coord = $(this).position();

編輯：使用.draggable作品，但不.dialog

編輯：增加了更多的斷碼。隨你。 實例對話（可拖動+可調整大小）：

 <script> 
    $(document).ready(function() { 



     $("#menu").dialog({ 
     bgiframe: true, 
     position: {my: 'left <?php echo $menumy; ?>', at: 'left <?php echo $menuat; ?>', of: window}, 
     modal: false, 
     height: <?php echo $menuheight; ?>, 
     width: <?php echo $menuwidth; ?>, 
     dialogClass: 'fixed-dialog', 
     dragStop: function(e, ui) { saveCoords(ui.offset.top, ui.offset.left); }, 
         resize: function(event, ui) { 
         $(this).dialog("option", 
       ui.size.height + " x " + ui.size.width); 

       $.post("savelayout.php", { menuheight: ui.size.height, menuwidth: ui.size.width }); 
        } 
     }).mousemove(function(){ 
       var coord = $(this).position(); 
       $("p:last").text("left: " + coord.left + ", top: " + coord.top); 

     }).mouseup(function(){ 
       var coords=[]; 
       var coord = $(this).position(); 
       var item={ coordTop: coord.left, coordLeft: coord.top }; 
       coords.push(item); 
       var order = { coords: coords }; 

       }); 

     }); 


    function saveCoords(top, left) { 
     $.post(
     "savelayout.php", 
     JSON.stringify({ 
      coordtop: Math.round(top), 
      coordleft: Math.round(left) 
     }) 
    ); 
    } 
     </script> 

Answer 1

好了，當你移動一個對話框，你可以做到這一點捕捉top（y）和left（x）的值。

function saveCoords(top, left) { 
    $.post(
    "savelayout.php", 
    JSON.stringify({ 
     coordtop: Math.round(top), 
     coordleft: Math.round(left) 
    }) 
); 
} 

$("#menu").dialog({ 
    bgiframe: true, 
    position: { 
     my: 'left top', 
     at: 'left top', 
     of: window 
    }, 
    modal: false, 
    dialogClass: 'fixed-dialog', 
    dragStop: function(e, ui) { 
     saveCoords(ui.offset.top, ui.offset.left); 
    } 
    }); 

當你去重新創建對話框，並希望它從你的價值觀定位背部，使用position像這樣：

<?php 
// Collect value from MySQL and enter it into an array 
$menu = array("at" => array("top" => 0, "left" => 0)); 
?> 

position: { 
    my: 'left top', 
    at: 'left+<?php echo $menu['at']['left']; ?> top+<?php echo $menu['at']['top']; ?>', 
    of: window 
} 

可以改善這一點了用支票：

position: { 
    my: 'left top', 
    at: 'left<?php echo isset($menu['at']['left']) ? '+'.$menu['at']['left'] : ''; ?> top<?php echo isset($menu['at']['top']) ? '+'.$menu['at']['top'] : ''; ?>', 
    of: window 
} 

就我個人而言，我會把它喂進一個全局定義的變量。

這裏是一個工作示例：

https://jsfiddle.net/Twisty/d9ff1LLu/

HTML

<div id="results" class="ui-widget-content"></div> 
<button id="remake">Remake Dialog</button> 
<div id="menu" title="menu title"></div> 

CSS

#results { 
    height: 2em; 
} 

jQuery

var menu = { 
    at: { 
    top: 0, 
    left: 0 
    } 
} 

function saveCoords(top, left) { 
    $.post("/echo/json/", { 
    json: JSON.stringify({ 
     coordtop: Math.round(top), 
     coordleft: Math.round(left) 
    }) 
    }, function(results) { 
    menu.at.top = results.coordtop; 
    menu.at.left = results.coordleft; 
    $("#results").html("Recorded { top: " + results.coordtop + ", left: " + results.coordleft + "}"); 
    }); 
} 

$(document).ready(function() { 
    $("#remake").button().click(function() { 
    $("#menu").dialog("close"); 
    $("#menu").remove(); 
    $("#results").html("Removed Menu. Creating new at position: 'top+" + menu.at.top + " left+" + menu.at.left + "'"); 
    var menuDialog = $("<div>", { 
     id: "menu", 
     title: "New Menu Title" 
    }).dialog({ 
     bgiframe: true, 
     position: { 
     my: 'left top', 
     at: 'left' + (menu.at.left > 0 ? "+" + menu.at.left : '') + ' top' + (menu.at.top > 0 ? "+" + menu.at.top : ''), 
     of: window 
     }, 
     modal: false, 
     dialogClass: 'fixed-dialog' 
    }); 
    }); 
    $("#menu").dialog({ 
    bgiframe: true, 
    position: { 
     my: 'left top', 
     at: 'left top', 
     of: window 
    }, 
    modal: false, 
    dialogClass: 'fixed-dialog', 
    dragStop: function(e, ui) { 
     saveCoords(ui.offset.top, ui.offset.left); 
    } 
    }); 
});