jQuery & jQueryUI Base

by KevinGabbert

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: 50px; 
    width: 50px; 
    margin-bottom: 10px;
}
#droppable { height: 100px; width: 300px; border: 1px dotted black; }

JavaScript

var acceptable = false;

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

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


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