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 に答える