jQuery & jQueryUI Base

by andrewwhitaker

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.min.js"></script>
<div id="item-one"></div>
<div id="item-two"></div>

CSS

div { 
    width: 100px; 
    height: 100px; 
    background-color: yellow;
    margin-bottom: 10px;
} 
.deleted { background-color:red; }

JavaScript

$("div").draggable({
    drag: function() {
       return !$(this).data("disabledrag");
    },
    revert: true
});

setTimeout(function() {
    // Get the iten currently being dragged:
    var $dragging = $(".ui-draggable-dragging");
    if ($dragging.length) {
        // If this is the item that was deleted, stop dragging:
        if ($dragging.attr("id") === "item-one") {
            $dragging.data("disabledrag", true);
            $dragging.addClass("deleted").html("This item has been deleted!");            
        }
    }

}, 5000);