Drag Div Box

by will525

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div id="droppable">Drop here</div><div id="draggable">Drag me Anywhere</div>
<div id="draggable2"></div>

CSS

#draggable { width: 100px; height: 70px; background: silver; cursor: pointer; }
#draggable2 { width: 100px; height: 100px;     background-image: url('http://1.bp.blogspot.com/_UdH8rcs3s1Q/TGdcNtKNxOI/AAAAAAAAAKM/-jvA0rVt9_E/s320/iPadBackgroundTexture-brown.png'); cursor: pointer;-moz-border-radius: 100px;border-radius: 100px;  }
#droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }

JavaScript

$(document).ready(function() {
    $("#draggable").draggable();
          $("#droppable").droppable({
      drop: function() { alert('dropped'); }
    });
  });
  $(document).ready(function() {
    $("#draggable2").draggable();
  });