Блог

Я хочу функцию, которая позволяет пользователям делать заметки, используя некоторые стикеры. Скрипт, который я использовал в моем файле .cshtml, является:

 <script>
var initStickies = function initStickies() {
    $("<div />", {
        text: " ",
        "class": "add-sticky",
        click: function () { createSticky(); }
    }).prependTo(document.body);
    $(window).unload(function () {
        $("div.sticky").each(function (i, el) {
            $(el).focusout();
        });
    });
    initStickies = null;
},
    openStickies = function openStickies() {
        initStickies amp;amp; initStickies();
        for (var i = 0; i < localStorage.length; i  ) {
            createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
    },
    createSticky = function createSticky(data) {
        data = data || { id:  new Date(), top: "40px", left: "40px", text: "Note Here" }

        return $("<div />", {
            "class": "sticky",
            'id': data.id
        })
            .prepend($("<div />", { "class": "sticky-header" })
                .append($("<span />", {
                    "class": "status-sticky",
                    click: saveSticky
                }))
                .append($("<span />", {
                    "class": "close-sticky",
                    text: "trash",
                    click: function () { deleteSticky($(this).parents(".sticky").attr("id")); }
                }))
            )
            .append($("<div />", {
                html: data.text,
                contentEditable: true,
                "class": "sticky-content",
                keypress: markUnsaved
            }))
            .draggable({
                handle: "div.sticky-header",
                stack: ".sticky",
                start: markUnsaved,
                stop: saveSticky
            })
            .css({
                position: "absolute",
                "top": data.top,
                "left": data.left
            })
            .focusout(saveSticky)
            .appendTo(document.body);
    },
    deleteSticky = function deleteSticky(id) {
        localStorage.removeItem("sticky-"   id);
        $("#"   id).fadeOut(200, function () { $(this).remove(); });
    },
    saveSticky = function saveSticky(id) {
        var that = $(this), sticky = (that.hasClass("sticky-status") || that.hasClass("sticky-content")) ? that.parents('div.sticky') : that,
            obj = {
                id: sticky.attr("id"),
                top: sticky.css("top"),
                left: sticky.css("left"),
                text: sticky.children(".sticky-content").html()
            }
        localStorage.setItem("sticky-"   obj.id, JSON.stringify(obj));
        sticky.find(".sticky-status").text("saved");
    },
    markUnsaved = function markUnsaved() {
        var that = $(this), sticky = that.hasClass("sticky-content") ? that.parents("div.sticky") : that;
        sticky.find(".sticky-status").text("unsaved");
    };
var STICKIES = (function () {
    var initStickies = function () { },
        openStickies = function () { },
        createSticky = function (data) { },
        deleteSticky = function (id) { },
        saveSticky = function () { },
        markUnsaved = function () { };

    return {
        open: openStickies,
        init: initStickies
    };
}());


STICKIES.open();
</script>
  

и divs, в которых я инициирую sticky notes в моем файле .cshtml:

 <div class="sticky ui-draggable" id="1281194825332" style="position: absolute; top: 40px; left: 40px;">
<div class="sticky-header">
    <span class="sticky-status"></span>
    <span class="close-sticky">trash</span>
</div>
<div contenteditable="true" class="sticky-content">
    Note Here
</div>
  

Это codepen с HTML, CSS и скриптами, которые я использую.
https://codepen.io/matei-coman/pen/RdMedX

Любая помощь была бы высоко оценена.

Руководство по sticky notes таково: https://code.tutsplus.com/tutorials/building-persistent-sticky-notes-with-local-storage—net-13727