Question

我试图将我的jquery-ui对话框的用户位置+大小存储到mysql数据库。我尝试在这里阅读手册：https://api.jqueryui.com/1.10/dialog/并且没有关于如何执行此操作的文档。下面我的代码的问题是$ data = json_decode（$ _ POST [＆＃34; data＆＃34;]）;在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);
    }
  });
});

jquery-ui对话框（通过php保存位置） - 仅适用于.draggable而非.dialog

1 个答案: