附加后无法更改 .CSS 位置答案

【问题标题】：Once Appended unable to change .CSS Position附加后无法更改 .CSS 位置
【发布时间】：2018-03-22 10:09:52
【问题描述】：

我将一些代码从一个文档附加到另一个文档。附加代码后，我尝试使用 JQuery 拖放设置新附加项目的位置。当我拖放元素时，位置存储在数组中并保存在 cookie 中。当页面刷新时，我检索 cookie 并从 cookie 设置位置。

一切似乎都在工作，但最后一部分当我刷新页面时，元素不会恢复到保存的位置。

这里是 JS：

$(document).ready(function() {
    checkApps();
    checkpositions();
});

function checkpositions() {
    if ($.cookie('PosApps')){
        var Poscookie = $.cookie('PosApps');
        var Pos = JSON.parse(Poscookie);

        $("#TimenDate").css({top:Pos[0].top, left:Pos[0].left});
        $("#User").css({top:Pos[1].top, left:Pos[1].left});
        $("#Weather").css({top:Pos[2].top, left:Pos[2].left});
        $("#facebooka1thd").css({top:Pos[3].top, left:Pos[3].left});
    };
};

function getFacebook() {
    var appname = "facebooka1thd";
    $.get("apps/"+appname+"/"+appname+".html", function(data){
        $('.AppList').append(data);
        $.cookie(appname, 1, { expires : 365 });
    });
};

function dragEnable() {
    $( ".AppSettings" ).show();
    $( "#dialog-settings" ).dialog( "close" );
    newAppDraggable();
    $( "#User .AppSettings" ).dblclick(function() {
        dragDisable();
    });
};

function newAppDraggable() {
    $('.App').draggable({
        handle: ".AppSettings",
        containment: "#AppBox",
        grid: [ 10, 10 ],
        stack: ".App"
    });
};

$(function() {
    $('.AppList').droppable({
        accept: ".App",
        tolerance: 'fit',
        drop: function(event, ui) {
            getAppPositions();
        }
    }); 
});

function getAppPositions() {
    var apps = $(".App"),
    positions = [];

    $.each(apps, function (index, app) {
        var positionInfo = $(app).position();

        positions.push(positionInfo);
    });
    var setPositions = JSON.stringify(positions);

    $.cookie("PosApps", setPositions, { expires : 365 });
};

function checkApps() {
    if ($.cookie('facebooka1thd')) {
        getFacebook();
    };
};

“facebooka1thd”文档：

<style>
.facebooka1thd {background:linear-gradient(to bottom, #133783 0px, #102E6D 100%) repeat scroll 0 0 #133783;}
.AppHeadfacebooka1thd img {
    height:24px;
    width:24px;
    padding:0;
    margin:1px 0 1px 0;
    float:left;
}
.AppHeadfacebooka1thd h1 {
    height:26px;
    padding:2px 0 2px 0;
    margin:0;
    font:bold 15px/22px 'Arial Narrow',Arial,Sans-Serif;
    float:left;
}
</style>
<div id="facebooka1thd" class="facebooka1thd App Size170x290 Optional">
    <div class="AppHeadfacebooka1thd">
        <img src="apps/facebooka1thd/Facebook.png" alt="Facebook"></img>
        <h1>Your News Feed<h1>
    </div>

    <div class="AppSettings"></div>
</div>

它被附加到的文档：

<html lang="en">
<head>
    <meta charset="UTF-8">

<!-- JQuery --->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

<!-- App Resorces --->
    <script src='javascript/jquery.cookie.js'></script>

<!-- Main Scripts --->
    <script type="text/javascript" src="javascript/scripts.js"></script>

<!-- Main Styles --->
    <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />

</head>
<body id="FullScreen">

    <section id="AppBox">
        <div class="AppList"></div>
    </section>

我不知道为什么它不起作用..

【问题讨论】：

只能假设从 cookie 数据重新创建页面不会导致完全相同的状态。可以是 HTML 或 CSS 或两者兼而有之。您只需找出差异。

标签： jquery css cookies position append

【解决方案1】：

我希望我理解正确，但我认为您必须在 $('.AppList').append(data); 之后从 getFacebook() $.get 回调中调用 checkpositions()

现在的方式是，checkApps() 和 checkpositions() 同时被调用。但是checkposition() 必须在新元素创建后执行。

【讨论】：

感谢您的快速回复！你的建议非常有效。我曾尝试移动呼叫，但我从未想过将其置于特定位置。
很好看。这是一个异步问题。
通过checkApps()从getFacebook()返回一个promise，你可以使用checkApps().then(checkpositions);，它更干净。（它稍微复杂一点，因为 cookie 可能没有设置但仍然相当简单）。

【解决方案2】：

jQuery 为任意位置的元素添加了多个坐标，position:relative 或 position:absolute。您需要先使元素可拖动，然后才能设置它们的坐标。

【讨论】：

感谢您的快速响应，但我确实使元素可拖动，我什至表示，这部分代码工作正常。不过谢谢