Drag & Drop Between DIVs

Drag & Drop Between DIVs

Hi All,

I've tried searching for a while on this, but I'm not quite sure what to do.

Currently, I am attempting to drag a DIV and drop it into another DIV, (which is working fine). However, when the DIV is dropped, it's dropped statically right where it was physically dropped by the mouse. How might I have the DIV just fall in line with the DOM, once it is dropped.

Here's the code I'm currently using:

<html>
<head>
  <script src="lib/jquery131.js"></script>
<script>
  $(document).ready(function(){
    $(".draggable").draggable({revert: 'invalid'});
$(".droppable").droppable({
   accept: ".draggable",
   activeClass: 'droppable-active',
   hoverClass: 'droppable-hover',
   drop: function(ev, ui) {
   
}

});
  });
  </script>
  <style>.draggable {

   top: 5px;
   left: 5px;
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   width: 75px;
   height: 75px;
   margin: 10px;
   z-index: 100;
}
.droppable {
   background-color: #e9b96e;
   border: 3px double #c17d11;
   width: 150px;
   height: 470px;
   margin: 10px;
   position: absolute;
   top: 5px;
   right: 5px;
   opacity: 0.7;
   overflow:auto;
}
.droppable-active {
   opacity: 1.0;
}
.droppable-hover {
   outline: 1px dotted black;
}</style>
</head>
<body>
 
<script src="http://ui.jquery.com/testing/ui/ui.core.js"></script>
<script src="http://ui.jquery.com/testing/ui/ui.draggable.js"></script>
<script src="http://ui.jquery.com/testing/ui/ui.droppable.js"></script>

<div class="draggable">drag me 1!</div><br>
<div class="draggable">drag me 2!</div><br>
<div class="draggable">drag me 3!</div><br>
<div class="droppable">drop on me!
<div class="draggable">I'm already in the droppable area!</div></div>
</body>
</html>


Please let me know if I'm being vague and need to explain this better.

Thanks in advance.