如何在翻书页面中设置可拖动元素

时间:2012-07-27 21:20:29

标签: draggable

我正在使用jquery动态翻书。我可以将便条添加到偶数页或偶数页。此代码创建注释选择将注释添加到哪个页面并拖动。

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

                }

我遇到的问题是当便条纸放在左侧和上方的页面上时它会起作用。但在右边和底部却没有。我试过[x,y,x1,y1]但是因为每本书都不同我试图使用我的id标签,如果#leftPageShadow with在div上,而另一本是#rightPageShadow

1 个答案:

答案 0 :(得分:1)

问题解决了我丢失了cookie ID更改cookie代码。