How to set draggable element in a flip book pages - draggable

Question

I am working with a jquery dynamic flip book. I can add post it notes to either page the even or odd. This code create the notes select which page to add the note to and drags.
function CreatePostIt() {
$("#PostIt").dialog({ modal: true, autoResize: true, height: 500, width: 530,
open: function () {
$("#BookMenu").fadeOut(500);
BookMenuShow = false;
$("#pNotes").addClass("yellow");
$("#pNotes").removeClass("transparent");
$("#pNotes").removeClass("blue");
$("#pNotes").removeClass("green");
$("#note-body").text("");
$("#pNotes").css("font-size", $("#NoteFontSize").val());
color = "yellow";
$("#pNotes").text("");
if (PageIndex == 0) {
$("#rightTn").click();
$("#leftTn").attr("src", "images/blank.gif")
$("#rightTn").attr("src", tnNames[PageIndex]);
} else {
$("#leftTn").width(120);
$("#rightTn").width(120);
$("#leftTn").attr("src", tnNames[PageIndex - 1])
$("#rightTn").attr("src", tnNames[PageIndex]);
$("#leftTn").click();
}
},
buttons: {
"INSERT": function () {
var count = $(".npg" + PageSelected).length;
var Annotation = $("<div style='z-index:250000' class='note npg" + PageSelected + "' index='0'></div>");
var aId = "Page-" + PageSelected + "-Note-" + (count + 1);
AnnoCount = AnnoCount + 1;
$(Annotation).attr("id", "Page-" + PageSelected + "-Note-" + (count + 1));
$(Annotation).css("font-size", $("#NoteFontSize").val());
$(Annotation).css("display", "none");
$(Annotation).append("<img class='noteClose' rel='Page-" + PageSelected + "-Note-" + (count + 1) + "' style='float:right; padding:10px 10px 5px 5px' src='images/close.gif'/>");
$(Annotation).append("<div style='padding:25px 25px 25px 25px;' id='noteText" + (count + 1) + "' class='noteBody'>" + $("#note-body").val() + " </div>")
$(Annotation).addClass("liveNote");
$(Annotation).addClass("npage" + PageSelected);
$(Annotation).addClass(color);
$("#pgDv" + (PageSelected)).prepend(Annotation);
$.cookie("Book-" + bookid + "-Page-" + PageSelected, aId + "||" + $("#note-body").val() + "||" + "0,0,0,0||" + color + "||" + $("#NoteFontSize").val() + "<*>", { expires: 365, path: "/" });
**if (ZoomOn != true) {
if ("#rightPageShadow") {
Annotation.draggable({ cusror: "pointer", containment: 'parent'
});
} else {
Annotation.draggable({ cusror: "pointer", containment: "#leftPageShadow"
});
}
}
else if (ZoomOn = true) {
Annotation.draggable({
create: function () {
$(this).show();
},
cusror: "pointer",
containment: "parent"
});
}
$(Annotation).show();
// $("#PostItNoteInd").show();
$(this).dialog("close");
$("#note-body").text("");**
}
, "CANCEL": function () {
$("#pNotes").text("");
$("#leftTn").attr("rel", -10);
$("#leftTn").css("border", "0px solid red");
$("#rightTn").attr("rel", -10);
$("#rightTn").css("border", "0px solid red");
$(this).dialog("close");
}
}
});
var cw = $("#PostItDialogContent").width();
$("#PostIt").dialog("option", "width", cw + 20);
}
the problem I am have is when the post it note is place on the page on left and top it works. but on the right and bottom it does not. I have tried [x,y, x1, y1] but because each book is different I tried to used the my id tags if you #leftPageShadow with is on div and other is #rightPageShadow

Answer 1

Problem fixed I was losing the cookie id change cookie code.