jQuery UI Droppable

Aggiunta di un elemento al carrello con jQuery UI Droppable

by Michele Pisani

HTML

<div id="contenitore"> 
    <div id="carrello"> 
        <p>Carrello</p> 
    </div> 
    <div id="fagioli"> 
        <p>Barattolo di fagioli</p> 
    </div> 
</div>

CSS

#carrello {background: #ccc;width:200px;height:250px;padding:0.5em;float:left;margin:10px 10px 10px 0;}
#fagioli {background: #822222;width:70px;height:90px;padding:0.5em;float:left;margin:10px;}
#fagioli:hover {cursor:move}

JavaScript

$(function() {
    $( "#fagioli" ).draggable();
    $( "#carrello" ).droppable({
        drop: function( event, ui ) {
            $( this )
            .find( "p" )
            .html( "Fagioli aggiunti al carrello." );
        },
        out: function( event, ui ) {
            $( this )
            .find( "p" )
            .html( "Fagioli rimossi dal carrello." );
        }            
    });    
});