Droppable Draggable Demo

by dirtyd77

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="wrapper">
    <div id="left">
        <p>Draggables:</p>
        <div id="draggables"></div>
    </div>
    <div id="right">
        <p>Droppables:</p>
        <div id="droppables"></div>
        </div>
</div>

CSS

#wrapper{
    width:700px;
    height:300px;
}

#draggables, #droppables{
    width:auto;
    height:75%;
    float:left;
    margin:1em;
    padding:2em;
}

#draggables div, #droppables div{
    width:100px;
    height:20px;
    border:1px solid black;
    padding:10px;
    margin:10px;
}

#draggables div{
    background: red;
}
#droppables div{
    background: green;
}

JavaScript

$(function(){
    //let's create the 100 draggable, droppable elements you mentioned
    for(var i = 0; i < 100; i++){
        $('#draggables, #droppables').append(
            $('<div></div>').append('<p></p>')
                            .text(i + 1)
        );
    }
    
    $('#draggables div').draggable();
    $('#droppables div').droppable({
      accept: "#draggables div",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
   
    
    
});