한 번 추가됨 .CSS 변경 가능

한 문서에서 일부 문서에 다른 코드를 추가하려고합니다. 코드가 추가되면 JQuery 드래그 앤 드롭을 사용하여 새 추가 된 항목의 위치를 설정하려고합니다. 요소를 드래그 앤 드롭하면 위치가 배열에 저장되고 쿠키에 저장됩니다. 페이지가 새로 고쳐지면 쿠키를 검색하고 쿠키에서 위치를 설정합니다.한 번 추가됨 .CSS 변경 가능

모든 것이 작동하는 것처럼 보이지만 페이지를 새로 고침하면 마지막 부분이 저장된 위치로 되돌아 가지 않습니다.

이

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

는 왜 늘 일을 알고 여기에

은 JS입니다 ..

출처

2013-06-24 ChristopherStrydom

쿠키 데이터에서 페이지를 다시 작성해도 정확히 동일한 상태가되지 않는다고 가정 할 수 있습니다. HTML 또는 CSS 또는 둘 다일 수 있습니다. 차이를 추적하면됩니다. –

나는 내가 올바르게 이해 해요 희망하지만 난 당신이 지금 checkApps() 및 checkpositions() 동시에 전화를받을 당신의 getFacebook()$.get 콜백

$('.AppList').append(data); 후 방법 내부에서 checkpositions()를 호출해야합니다 생각합니다. 그러나 checkposition()은 새 요소를 만든 후에 실행해야합니다.

출처

2013-06-24 21:16:22 Andy

빠른 응답을 보내 주셔서 감사합니다! 당신이 제안한 것이 완벽하게 작동합니다. 나는 그 전화를 움직이기 위해 노력했지만, 나는 그 특정한 위치에 그것을 두는 것을 결코 생각하지 않았다. – ChristopherStrydom

잘 찾아 냈습니다. 비동기 문제입니다. –

'checkApps()'를 통해'getFacebook()'에서 약속을 되 돌리면'checkApps(). then (checkpositions);'를 사용할 수있다. 쿠키가 설정되지는 않았지만 여전히 사소한 것이기 때문에 매우 복잡합니다. –

jQuery 요소의 좌표가 position:relative 또는 position:absolute 인 임의의 위치에 추가됩니다. 좌표를 설정하기 전에 요소를 드래그 할 수있게해야합니다.

출처

2013-06-24 21:14:00

빠른 응답 주셔서 감사합니다하지만 나는 draggable 요소를 확인하고 심지어 그 코드의 일부가 잘 작동했다. 감사합니다. – ChristopherStrydom

한 번 추가됨 .CSS 변경 가능

답변

관련 문제