Drag and Drop

http://stackoverflow.com/questions/10325756/jquery-draggable-and-droppable-what-am-i-missing

by ryanwfiorini

HTML

<div class="parent">
    <div class="sort" id="1"><a href="#" class="drag">event 1</a></div>
    <div class="sort" id="2"><a href="#" class="drag">event 2</a></div>
    <div class="sort" id="3"></div>
</div>


<div class="parent">
    <div class="sort" id="1-2"></div>
    <div class="sort" id="2-2"><a href="#" class="drag">event 3</a></div>
    <div class="sort" id="3-2"><a href="#" class="drag">event 4</a></div>
</div>

CSS

div{float:left;}
.sort{clear:left; min-width:50px; min-height:20px; border: 1px solid gray; padding:5px;}

JavaScript

$(document).ready(function() {

 
    $(".drag").draggable({
       revert: "invalid"
    });

    $(".sort").droppable({
     drop: function( event, ui ) {
         if(!($(this).children(".drag").size() == 1)) {
             $(ui.draggable[0]).appendTo($(this));
             ui.draggable.css({
                    left: 0,
                    top: 0
                })
         } else {
            $(ui.draggable[0]).draggable("option","revert",true);
         }
      }

    });
  });