Sticky Note V2

by Dipak1991

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<input type="button" value="add new sticky" id="click" />
<div id="one"></div>
<div id="sortable"></div>

CSS

.note {

    height: 20%;

    width: 30%

}

.darkYellow {

    border:1px solid red;

    position:absolute;

    background-color: #f8f8f8;

    width:20%;

    height:30%px;

    font-size:12px;

    text-indent:1px;

    -webkit-box-shadow: 1px 1px 10px #888888;

}

.lightYellow {

    width:70%;

    height:80%;

    background-color: #e1e1e1;

    margin-top:1px;

}

textarea {

    margin-left:2px;

    margin-top:5px;

    background-color:transparent;

    border:none;

    overflow: hidden;

    outline:none;

}

.index {

    z-index: 55;

}

.close {

    cursor: select;

    border: thin solid black;

    width:7px;

    height:7px;

    padding:0;

    line-height:2pt;

    float:right;

    margin-top:3px;

    margin-right:2px;

    font-size:13px;

}

#sortable {

    height: 50%;

    width : 50%;

    border : 1px solid grey;

    position: absolute;

    right: 0;

    bottom:0;

}

#sortable {

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 60%;

}

#sortable li {

    margin: 0 3px 3px 3px;

    padding: 0.4em;

    padding-left: 1.5em;

    font-size: 1.4em;

    height: 18px;

    cursor:move;

}

#sortable li span {

    position: absolute;

    margin-left: -1.3em;

}

#sortable li.fixed {

    cursor:default;

    color:#959595;

    opacity:0.5;

}

JavaScript

var x = "<div class='note'> \
            <div class='darkYellow'>\
                <div class='close'>x</div>Header \
                    <div class='lightYellow'>\
                        <textarea maxlength='150' rows='14' cols='27' class='limited'>\
                        </textarea>\
                    </div>\
                </div> \
            </div> \
         </div>";


$(document).on("click", "#click", function () {
    var count = 0;
    var $x = $(x).append("<span>'" + (count++) + "'</span>")
    $("#one").append($x);
});

$(document).on("click", "#one  .close", function (event) {
    $(this).closest(".note").remove();
    event.preventDefault();
    event.stopPropagation();
});

$(document).on("click", "#sortable  .close", function (event) {
    $(this).closest(".note").remove();
    event.preventDefault();
    event.stopPropagation();
});

$(document).on("click", ".darkYellow", function (event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).closest(".note").appendTo($("#sortable"));
});

$("#sortable").sortable({
    cancel: ".fixed"
});

$("#sortable").disableSelection();