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

p{float:left;}

.highlight{background:purple; border:2px solid orange;}

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

#draggables, #droppables{
    width:20%;
    height:75%;
    float:left;
    margin:1em;
    padding:2em;
    border:1px solid black;
}

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

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)
        );
    }
    //make draggable
    $('#draggables div').draggable({
        revert: 'invalid'
    });
    
    //make droppable
    //let's make droppables only accept odd elements
    $('#droppables div').droppable({
      accept: "#draggables div",
      drop: function(e, ui) {
          var drag = ui.draggable,
              drop = $(this),
              index = drop.index() + 1;

          console.log(drag.draggable( "option", "revert"));
          //if index is odd
          if(index % 2){
              //highlight dropped element 
              drop.addClass("highlight");
          }else{
              drag.draggable( "option", "revert", true ); //revert back to start position   
          }
          
      }
    });
});