Question

我将一些代码中的一些代码附加到另一个文档中。一旦附加了代码，我尝试使用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();
    };
};

＆＃39; facebooka1thd＆＃39;文件：

<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>

我不知道为什么它不会工作......

Answer 1

我希望我能正确理解这一点，但我认为您必须在checkpositions()

后的getFacebook() $.get回调中拨打$('.AppList').append(data);

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

Answer 2

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

一旦Appended无法更改.CSS位置

2 个答案: