Fatal编程技术网
  • jquery/
  • Jquery 一旦添加，就无法更改.CSS位置

Jquery 一旦添加，就无法更改.CSS位置

jquery css cookies

Jquery 一旦添加，就无法更改.CSS位置,jquery,css,cookies,position,append,Jquery,Css,Cookies,Position,Append,我正在将一些代码从一个文档附加到另一个文档。添加代码后，我尝试使用JQuery拖放设置新附加项的位置。当我拖放元素时，位置存储在数组中并保存在cookie中。刷新页面时，我检索cookie并从cookie中设置位置 一切似乎都正常，但最后一部分，当我刷新页面时，元素不会恢复到保存的位置 以下是JS： $(document).ready(function() { checkApps(); checkpositions(); }); function checkpositions(

我正在将一些代码从一个文档附加到另一个文档。添加代码后，我尝试使用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>


.facebooka1thd{背景：线性渐变（到底部，#133783 0px，#102E6D 100%）重复滚动0#133783；}
.AppHeadfacebooka1thd img{
高度：24px；
宽度：24px；
填充：0；
保证金：1px0 1px0；
浮动：左；
}
.AppHeadfacebooka1thd h1{
高度：26px；
填充：2px0 2px0；
保证金：0；
字体：粗体15px/22px“Arial窄”，Arial，无衬线；
浮动：左；
}
你的新闻提要
它附加到的文档：

<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>
我不知道为什么它不起作用。

jQuery为元素添加了多个坐标，这些元素位于任意位置，可以是
position:relative
或
position:absolute
。在能够设置元素的坐标之前，您需要使元素可以拖动。

我希望我正确地理解了这一点，但我认为您必须从
getFacebook（）
$内部调用
checkpositions（）
。在
$（'.AppList'）之后获取
回调。追加（数据）


现在的方式是，
checkApps（）
和
checkpositions（）
同时被调用。但是
checkposition（）
必须在创建新元素后执行。
只能假设从cookie数据重新创建页面不会导致完全相同的状态。可以是HTML或CSS或两者兼有。您只需追踪差异。感谢您的快速回复！你的建议很管用。我试着把电话转过来转过去，但我从没想过要把它放在那个特定的位置上。这是一个异步问题。通过
getFacebook（）
通过
checkApps（）
返回承诺，您可以使用
checkApps（）。然后（checkpositions），它更干净。（这稍微复杂一些，因为cookie可能没有设置，但仍然相当简单）。感谢您的快速响应，但我确实使元素可以拖动，我甚至说，代码的这一部分工作正常。谢谢