0

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

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

4

2 回答 2

2

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

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

于 2013-06-24T21:16:22.073 回答
0

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

于 2013-06-24T21:14:00.340 回答