amazing drag and drop

by J. Jones

HTML

<div data-role="page" id="userstory" data-theme="b">
    <div class="content" data-role="content">
        <div id="taskOpen">
            <div data-role="header" data-theme="e">
                	<h5>Open Tasks</h5>

            </div>
            <div id="wrapper_taskOpen">
                <ul id="taskopenlist" class="stickynote">
                    <li id="draggable" data-name="3" data-value="Task 3">	<a href="#">
									<h3>Task 3</h3>
									<p>Text Content #3</p>
								</a>

                    </li>
                    <li id="draggable" data-name="4" data-value="Task 4">	<a href="#">
									<h3>Task 4</h3>
									<p>Text Content #4</p>
								</a>

                    </li>
                </ul>
            </div>
        </div>
        <div id="taskAssigned">
            <div data-role="header" data-theme="e">
                	<h5>Assigned Tasks</h5>

            </div>
            <div id="wrapper_taskAssigned">
                <ul id="taskassignlist" class="stickynote">
                    <li id="draggable" data-name="2" data-value="Task 2">	<a href="#">
									<h3>Task 2</h3>
									<p>Text Content #2</p>
								</a>

                    </li>
                </ul>
            </div>
        </div>
        <div id="taskClosed">
            <div data-role="header" data-theme="e">
                	<h5>Closed Tasks</h5>

            </div>
            <div data-role="popup" id="popupCloseTask" data-theme="a" class="ui-corner-all">
                <form id='form1'>
                    <div style="padding:10px 20px;">
                        	<h3 id="taskcloseForm-header"></h3>

                        <label for="description" class="ui-disabled">Description:</label>
                        <textarea class="ui-disabled" cols="40" rows="8" name="description" id="description"></textarea>
                        <label for="hours">Hours required:</label>
                        <input name="hours" id="hours" value="0" data-theme="a"...

CSS

.content {
    width: 100%;
}
.mainheader {
    height: 50px;
}
.mainheader img {
    float: left;
    padding: 2px 4px;
}
.mainfooter {
    height: 50px;
}
.mainfooter img {
    float: right;
    padding: 8px 10px;
}
#userstoryListing, #taskAssigned, #taskOpen, #taskClosed {
    outline: 1px solid grey;
    float: left;
    height: 100%;
    margin: 0px 3px;
    width: 24.5%;
}
#wrapper_userstoryListing, #wrapper_taskAssigned, #wrapper_taskOpen, #wrapper_taskClosed {
    position: relative;
    width: 100%;
    z-index: 1;
}
.custom-li {
    padding: 0 !important;
    border-width: 0 !important;
}
.custom-collapsible {
    margin: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-width:0 !important;
}
/* define the sticky note appearance */
 h3, p {
    text-align: center;
}
ul.stickynote, li {
    list-style: none;
}
ul.stickynote {
    overflow: visible;
    padding: 3px;
}
ul.stickynote li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 100px;
    width: 110px;
    padding: 1px;
    /* Firefox */
    -moz-box-shadow:5px 5px 7px rgba(33, 33, 33, 1);
    -moz-transform:rotate(-6deg);
    /* Safari+Chrome */
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    -webkit-transform:rotate(-6deg);
    /* Opera */
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    -o-transform:rotate(-6deg);
}
ul.stickynote li:nth-child(even) a {
    -o-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
    position:relative;
    top:5px;
}
ul.stickynote li:nth-child(3n) a {
    -o-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    position:relative;
    top:-5px;
}
ul.stickynote li:nth-child(5n) a {
    -o-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    position:relative;
    top:-10px;
}
ul.stickynote li a:hover,...

JavaScript

$("li[id='draggable']").data("Left", $("li[id='draggable']").position().left)
    .data("Top", $("li[id='draggable']").position().top);

function setDimensionsForUserStory() {
    var h = $(window).height() - $(".mainheader").outerHeight() - $(".mainfooter").outerHeight();
    $(".content").css("height", h);
}

$(document).ready(function () {
    setDimensionsForUserStory();
    $(window).resize(setDimensionsForUserStory);
    window.onorientationchange = setDimensionsForUserStory;

    $("li[id='draggable']").draggable({
        appendTo: ".content",
        revert: "invalid",
        cursor: "move",
    });

    $("#taskClosed").droppable({
        //			accept: "#wrapper_taskAssigned li",
        accept: function (el) {
            console.info(el.parent().parent().attr("id"));
            if ((el.parent().parent().attr("id") == "wrapper_taskAssigned") && (el.position().left > $("#taskAssigned").width())) {
                return true; // need some improvement here
            }
            return false;
        },
        drop: function (event, ui) {
            if (ui.draggable.data("value") == "Task 2") {
                $("#taskcloseForm-header").empty().append("Close task  " + ui.draggable.data("name"));
                $("#popupCloseTask").popup("open");
            } else {
                console.info("wrong");
                event.revert = true;
            }
        }
    });

});
$("#closetaskForm-submit-button").click(function () {
    $.ajax({
        url: '/echo/html/',
        data: $('#form').serialize(),
        success: function (data) {
            alert('succes');
        }
    });

});
$("#closetaskForm-cancel-button").click(function () {
    $("#popupCloseTask").popup("close");
    $("li[id='draggable']").animate({
        "left": $("li[id='draggable']").data("Left"),
            "top": $("li[id='draggable']").data("Top")
    }, "slow");
});
$("#popupCloseTask").on({
    popupbeforeposition: function () {
       ...