jQuery droppable没有触发多个droppable

Question

我正在尝试将jQuery droppable集成到我的html文档中，但无论我尝试什么，第二个droppable都不会被触发。

我的HTML是：

<div class="content">
  <div id="items1" class="span2 pull-left">
    <div class="item">

    </div>
    <div class="item">

    </div>
  </div>
  <div id="items2" class="span2 pull-right">
    <div class="item">

    </div>
    <div class="item">

    </div>
  </div>
</div>

我的jQuery是：

<script>
            $( ".item" ).draggable({ 
                revert:true,
                start: function(e, ui)
                 {
                  $(ui.helper).addClass("ui-draggable-helper");
                 },
                 helper: function(){
                    $copy = $(this).clone();
                    return $copy;},
                 appendTo: "body"
            });
    $("#items1").droppable({
        accept: ".item",
        drop: function(event, ui) {
            var id = ui.draggable.attr("id");
            var servertype = ui.draggable.attr("servertype");
            if(servertype != "to"){
                copyMail(id,servertype);
            }
        }
    });
    $("#items2").droppable({
        accept: ".item",
        drop: function(event, ui) {
            var id = ui.draggable.attr("id");
            var servertype = ui.draggable.attr("servertype");
            if(servertype != "from"){
                copyMail(id,servertype);
            }
        }
    });
  </script>

拖动＃items2上的＃items1中的每个项目都有效， 但是＃items2到＃items1中的每个项目都没有触发放置事件。

是Z-Index的问题还是其他问题？

谢谢！