如何將div拖入框

Question

我有以下代碼，可以將div拖入3個框中。
我試圖讓可拖動的div適合從你放在它上面的盒子中的盒子，因爲此刻它會掉落它，但它允許它在窗口上的任何位置掉落，我怎麼能阻止這種情況發生？

<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

你有什麼不應來工作，它應該是.draggable()和.droppable()（小寫）。對於另一片，指定revert option，像這樣：

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

另外accept是一個選擇器，以便將其更改爲.dropaccept這樣的：

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

注意對其它性質的殼體的變化，以及，JavaScript 區分大小寫！

You can test it out here。