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.9/jquery-ui.js"></script>
<div class="draggable"></div>
<div class="draggable"></div>
<div id="droppable"></div>
<a href="#">Toggle droppability</a>

CSS

.draggable { 
    background-color: red; 
    height: 100px; 
    width: 100px; 
    margin-bottom: 10px;
}
#droppable { height: 300px; width: 300px; border: 1px dotted black; }

JavaScript

$(".draggable").draggable({ 
    revert: 'invalid'
});

$("#droppable").droppable({
    accept: function(el) {
        return el.hasClass('acceptable');
    }
});


$("a").bind("click", function(event) {
    event.preventDefault();
    $(".draggable").toggleClass("acceptable");
});