jQuery UIの特殊領域のみの要素の削除

Question

jQuery UIのドラッグアンドドロップに問題があります。私は4つの領域のうちの1つで画面に配置される新しい要素を動的に作成します。これらの要素はドラッグ可能で、スクリーン全体に配置できます。しかし、私は、これらの要素が3つの領域のいずれかにしかドロップされないようにしたい。

私はここで完全な作業例を作成しました：http://jsbin.com/enusu4/

赤いボーダー内領域内のテキストをクリックすると、新しい要素が作成され、緑豊かなエリアdrop1に配置されます。この要素は緑色の領域（drop1,drop2またはdrop3）のいずれかにのみドロップ可能になりました。これどうやってするの？

最高のお付き合い

Answer 1

私はそれはあなたがやりたいことができ、いくつかの修正を加えて、同様の質問hereに答えました：
Javascriptを：

$(function() { 
    $('.drag').draggable({ 
     revert: "invalid", 
     scope: "items" 
    }); 
    $('#droppable').droppable({ 
     scope: "items", 
     // if you want to disable the dragging after drop un-comment this 
/* 
     drop: function(e, ui) { 
      $(ui.draggable).draggable({"disabled":true}); 
     } 
     */ 
    }); 
    $('#droppable2').droppable(); 
    $(':button').click(function() { 
     var $box = $('<div class="drag">Drag me</div>'); 
     $('#cont').append($box); 
     $box.draggable({ 
      revert: "invalid", 
      scope: "items" 
     }); 
    }); 
}); 

HTML：

<div><button type="button">Add box</button></div> 
<div id="droppable">Drop here</div> 
<div id="droppable2">Out of scope!</div> 
<div class="clear"></div> 
<div id="cont"> 
    <div id="draggable" class="drag">Drag me</div> 
    <div id="draggable2" class="drag">Drag me</div> 
</div> 

Example Link

EDIT： さて、ここに更新があります：
Javascriptを：

$(function() { 
    var dragOptions = { 
     revert: "invalid", 
     scope: "items", 
     helper: "clone" 
    } 
    $('.drag').draggable(dragOptions); 
    $('.droppable').droppable({ 
     scope: "items", 
     drop: function(e, ui) { 
      var $drop = $(this); 
      $(ui.draggable).draggable({ 
       "disabled": true 
      }).appendTo($drop); 
     } 

    }); 
    $('#droppable2').droppable(); 

    $(':button').click(function() { 
     var $box = $('<div class="drag">Drag me</div>'); 
     $('#cont').append($box); 
     $box.draggable(dragOptions); 
    }); 
}); 

HTML：

<div><button type="button">Add box</button></div> 
<div style="float: left;"><h3>Drop here:</h3> 
    <div class="drop1 droppable"></div> 
</div> 
<div style="float: left;"><h3>Drop here:</h3> 
    <div class="drop2 droppable"></div> 
</div> 
<div style="float: left;"><h3>Out of scope!</h3> 
    <div id="droppable2"></div> 
</div> 
<div class="clear"></div> 
<div id="cont"> 
    <div class="drag">Drag me</div> 
    <div class="drag">Drag me</div> 
</div> 

Example Link 2

Answer 2

$("#dropable").droppable({ 
    hoverClass: "ui-state-hover", 
    drop: function (event, ui) { 
     if ($('.ui-state-hover').size() > 0){return false;} 
     //TODO 
    } 
}