拖放保存定位问题

dragdrop save positioning issue

本文关键字：问题 定位 保存 拖放      更新时间：2023-09-26

我目前正在使用一个拖放脚本，并保存（position:relative）div的左坐标和顶部坐标。我的问题是，当我重新加载时，保存它们的坐标并不总是相同的位置。

div位于一个具有给定高度和宽度的容器内（该容器限制div仅在其内部移动-周界div）

因此，我试图将坐标仅用于DIV内的工作/空间，而不是整个页面。

我正在使用PHP为该页面获取正确的divs/widgets，该页面提供widget类（背景和其他基于css的变量）

所有窗口小部件都有一个自定义ID，以防特定窗口小部件中有多个

这是我的主要代码：

<?
    $load = mysql_query("SELECT * FROM `widgets` WHERE `page`='1' AND `show`='yes'")or die(mysql_error());
    while($widget = mysql_fetch_array($load)){
?>
<div id="<? echo $widget['id']; ?>" style="left: <? echo $widget['left']; ?>px; top: <? echo $widget['top']; ?>px;" class="<? echo $widget['widgetid']; ?> draggable ui-widget-content" onmouseup="find('<? echo $widget['id']; ?>','1')"> </div>
<? } ?>

这是我保存的Javascript：

function find(id, page){
    var position = $("#"+id).position();
    $.ajax({
        type: "POST",
        url: "save.php",
        data: "l=" + position.left + "&t=" + position.top + "&request=" + page + "&w=" +id,
        success: function(msg){
            var element = document.getElementById(id);
            element.style.opacity = "1.0";
        }
    });
}

我在左边，t是顶部，两个都是在mouseup上发送的（w=widgetid，request=pageid）

变量被保存到数据库中，只是没有正确地放置在页面上（要么向右移动，要么稍微向上移动）

如有任何帮助，我们将不胜感激！

提前感谢

如.position():上的jQuery文档所述

获取的集合中第一个元素的当前坐标匹配的元素，相对于偏移父元素。

如果你继续阅读，上面写着

将其与.offset（）进行对比，后者检索当前位置相对于文档。

相关文章：