Comment faire glisser div dans les cases

Question

J'ai le code suivant qui me permet de faire glisser un div en 3 cases.
J'essaie d'obtenir le div draggable pour tenir dans la boîte d'onces vous l'avez laissé tomber, parce que pour l'instant il va le laisser tomber, mais il permet de le laisser tomber n'importe où sur la fenêtre comment puis-je arrêter cela ?

<div id="drop1" class="dropzone">Accepts the element if fits inside</div> 
<div id="drop2" class="dropzone">Accepts the element if intersects</div> 
<div id="drop3" class="dropzone">Accepts the element if pointer hovers</div> 
<div id="drag" class="dropaccept">Drag me</div> 
<script type="text/javascript"> 
    $(document).ready(
function() 
{ 
    $('#drag').Draggable(); 
    $('#drop1').Droppable(
     { 
      accept :  'dropaccept', 
      activeclass: 'dropactive', 
      hoverclass:  'drophover', 
      tolerance:  'intersect' 
     } 
    ); 
    $('#drop2').Droppable(
     { 
      accept :  'dropaccept', 
      activeclass: 'dropactive', 
      hoverclass:  'drophover', 
      tolerance:  'intersect' 
     } 
    ); 
    $('#drop3').Droppable(
     { 
      accept :  'dropaccept', 
      activeclass: 'dropactive', 
      hoverclass:  'drophover', 
      tolerance:  'intersect' 
     } 
    ); 
} 
); 
</script> 

Answer 1

Qu'est-ce que vous avez ne devrait pas fonctionner, il doit être .draggable() et .droppable() (minuscules). Pour l'autre pièce, spécifiez le revert option, comme ceci:

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

également accept est un sélecteur, donc changer à .dropaccept comme ceci:

$('#drop1').droppable(
    { 
     accept :  '.dropaccept', 
     activeClass: 'dropactive', 
     hoverClass:  'drophover', 
     tolerance:  'intersect' 
    } 
); 

Notez les modifications du boîtier sur les autres propriétés ainsi , JavaScript est sensible à la casse!

You can test it out here.