Javascript jqueryui拖放&；落差

当我在我的可拖动元素上添加一个边距时，可拖放元素的行为很奇怪。通过拖动右侧的图元检出

HTML

CSS

---

有人知道如何解决这个问题吗？

如果只是关于定位，请尝试：

position: absolute;
top:300px;

---

我在firefox上也有同样的问题。如果拖动右侧的元素，drop元素将接受它，即使它不在其中。如果你试图把元素带到它上面，它就不会接受。对不起，我不明白。我可以将可拖动元素拖动到我想要的方式和位置，没有任何特殊或奇怪的事情发生。现在的问题是，为什么要在一个可拖动的元素上留有空白？显然jQueryUI中有一个bug。我需要这个边距来将不同的可拖动元素放置在正确的位置。我可以用一个父div来做这件事。

  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      hoverClass: "drop-hover",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });

#draggable { 
    width: 100px; 
    height: 100px; 
    padding: 0.5em; 
    float: left; 
    margin: 300px 10px 10px 0; 
}
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.drop-hover{
    border: 3px solid #F00;
}

position: absolute;
top:300px;