jQuery Drag and Drop

by sbhomra

HTML

<div>
<ul id="locdrop" class="connectedSortable">
  <li class="xdrop ui-state-default" id="dropA">drop 1</li>
  <li class="xdrop ui-state-default" id="dropB">drop 2</li>
  <li class="xdrop ui-state-default" id="dropC">drop 3</li>
  <li class="xdrop ui-state-default" id="dropD">drop 4</li>
  <li class="xdrop ui-state-default" id="dropE">drop 5</li>
</ul>
<ul id="locdrag" class="connectedSortable">
   <li class="xdrag" id="dragE">drag 5</li>
   <li class="xdrag" id="dragC">drag 3</li>
   <li class="xdrag" id="dragB">drag 2</li>
   <li class="xdrag" id="dragA">drag 1</li>
   <li class="xdrag" id="dragD">drag 4</li>
</ul>
</div>
<br style="clear:left;"/>
<div class="counter"> </div>
<div class="info"> </div>

CSS

#locdrop, #locdrag {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    margin-right: 5px;
}
#locdrop li, #locdrag li {
    margin: 0 3px 5px 3px;
    padding: 5px;
    font-size: 1em;
    width: 155px;
    height: 15px;
    border: 0px;
}
.xdrag {
    background-color: #a1d8ff;
    cursor: move;
}
.xdrop {
    background-color: #a1d8ff;
}

JavaScript

$("#locdrag li").draggable({
  revert: true, cursor:'hand', opacity:0.5, 
  start: function() { 
           $(this).addClass('active'); 
  }
});

$( "#locdrop li" ).droppable({
  hoverClass: "ui-state-hover",
  drop: function( event, ui ) {
          var oldvalue = $(this).text();
          var dragID = $('.active').attr('id').substring(4);
          var dropID = $(this).attr('id').substring(4); 
          $( this )
          .html(ui.draggable.text())
          .append(' ','<a href="#">[UNDO]</a>')
          .one("click",function(){
            $(ui.draggable).show();
            $(this).css("color","black");
            $(this).text(oldvalue);
            $(this).droppable({disabled:false});
            $(this).removeClass('OK NOK');
            var numItems = $('.OK').length;
            $('.counter').html('Correct: '+numItems +'/5'); 
          });
          $(this).droppable({disabled:true});
          $(ui.draggable).hide();
          $('.active').removeClass('active');
          
          if (dragID == dropID) {
            $(this).addClass('OK');
            //$(this).css("color","green");
            //$('.info').append(' OK <br/>');
          } else {
            $(this).addClass('NOK');
            //$(this).css("color","red");
            //$('.info').append(' NOK <br/>');
          }
          var numItems = $('.OK').length;
          $('.counter').html('Correct: '+numItems +'/5'); 
      
        }
      });