<div class="drag"> I am a drag </div> <div class="drag"> Drag me, too </div> <div class="drop"> Drop zone </div>
$('.drag').on('draginit', function(ev, drag) { // Create a ghost for this drag drag.ghost(); }); $('.drop').on({ 'dropover' : function(ev, drop, drag) { $(this).addClass('highlight'); }, 'dropout' : function(ev, drop, drag) { $(this).removeClass('highlight'); }, 'dropon' : function(ev, drop, drag) { $(this).html('Dropped: ' + drag.element.html()); $(this).removeClass('highlight'); } });
body{ font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif; } div { padding: 5px; margin: 10px; } .drag { cursor: pointer; border: 1px dotted red; width: 150px; float: left; } .drop { clear: both; border: 1px solid gray; width: 200px; height: 100px; background-color: #EFEFEF; } .highlight { background-color: yellow; }