Not accepting a drag

Not accepting a drag

  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8" />
  5.     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  6.   <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  7.     <script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

  9.   
  10.   <style> 

  12. #draggable1 {color:grey; font-family:HelveticaNeue; font-weight:900; font-size:40px; }
  13. #drop{ border-bottom:2px solid #ccc; width:330px; margin:240px 20px 0px 440px; float:left; }  
  14. #text1 {position:absolute; width: 450px; height: 100px;  margin-left:60px; margin-top: 150px; color:grey; font-family:HelveticaNeue; font-weight:900; font-size:40px;}
  15. .draggable{padding: 5px; float: left; margin:40px 40px 50px 50px;}
  16.  </style>
  17.   <script>

  19.  
  20.   $(function() {
  21.     $( "#draggable1" ).draggable({
  22. snap: '#drop',
  23. snapMode: "inner",
  24. tolerance: 'fit',
  25. snapTolerance: 50,
  26. revert:'invalid',
  28. });
  31.     $( "#drop" ).droppable({
  32. accept: '#draggable1',
  33. drop: function(event, ui) {
  34.      $("#draggable1").css("color","#95CB6C");
  35. ui.draggable.destroy();

  37. },
  38. });
  39.  
  40. });
  41.   
  42.   </script>
  43. </head>
  44. <body>

  46. <div id="draggable1"><p>SANDY COLOUR</p></div>
  47. <div id="drop"></div> 
  48. <div id="text1"><p>DESERT</p></div>

  50.  
  51.  </body>
  52. </html>


Ive implemented the drag and drop. It wants to snap but wont accept the draggable. Any ideas why not. Im sure its something to do with styling but I don't know how else to style it.

Thanks

Craig