javascript – 只删除到看到的元素

我有以下内容：

我正在尝试将其设置为当您拖动项目时,它只会被删除到您可以看到的div元素,并且不会被覆盖.

所以我使用了这个js：

$(".draggable").draggable({
    helper: "clone"
})
$("#bottom,.draggable").droppable({
    drop: function(event,ui) {
        var $this = $(this),$dragged = $(ui.draggable);
        $this.append($dragged.clone());
    },hoverClass: "dragHover"
})​

但它会丢弃两个地方的元素,即使只有一个掉落区域不可见！

我如何修复它以便不会发生这种情况？

小提琴：http://jsfiddle.net/maniator/Wp4LU/

额外的信息,无需小提琴重新创建页面：

HTML：

<div id="top">
    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>
  </div>

  <div id="bottom"></div>

CSS：

.draggable {
    border: 1px solid green;
    background: white;
    padding: 5px;
}

.dragHover{
    background: blue;
}

#top {
    height: 500px;
    overflow-y: scroll;
}
#bottom {
    height: 150px;
    overflow-y: scroll;
    border: red solid 4px;
}

解决方法

尝试使用accept函数进行设置.
The working demo.

$("#bottom,accept: function () {
        var $this = $(this),divTop= $("#top");
        if ($this.is(".draggable")) {
          return $this.offset().top < divTop.offset().top + divTop.height() ;
        }
        return true;
    },hoverClass: "dragHover"
})​;​