DRAG AND HIGHLIGHT

by bizamajig

HTML

<div id="highlighter">highlighter</div>
<div id="droppable_1" class="droppable">1</div>
<div id="droppable_2" class="droppable">2</div>
<div id="droppable_3" class="droppable">3</div>
<div id="droppable_4" class="droppable">4</div>

<div id="draggable_1" class="draggable">draggable</div>

CSS

div{margin:20px 10px;padding:10px;}
.highlighter_focus_in{border:1px solid #585858;background-color:#F7FE2E;}
.highlighter_focus_out{border:none;background-color:#fff;}
.droppable{border:1px solid #eee;background-color:#ccc;}

JavaScript

$( ".draggable" ).draggable({    
    revert: true, 
    revertDuration: 600,  
});
$(".droppable").droppable({
        accept: '.draggable',
        over: function(event, ui) {
           $('#highlighter').addClass('highlighter_focus_in');
             $('#highlighter').removeClass('highlighter_focus_out');
        },
        out: function(event, ui) {
           $('#highlighter').addClass('highlighter_focus_out');
             $('#highlighter').removeClass('highlighter_focus_in');
        },    
        drop: function() { 
            alert("You dropped to div ID "+$(this).attr('id')); 
            }
    });