jQuery拖动和调整大小

Question

我正在使用jQueryUIDraggable和Resizable重新调整大小和拖动div。它给了我一些奇怪的行为，比如它在容器外面跳转的重新大小，我该如何修复它。任何帮助，应该感激。

HTML： -

<div class="paper-area" id="paper_area"></div> 
<div class="upload-logo drag">Upload Logo</div> 

JS： -

$(".drag").draggable({ 
      containment: ".paper-area", 
      start: function(e, ui) { 
      $(this).css({ 
      // position: "relative", 
      }); 
      }, 
      stop: function(e, ui) { 
       containment: ".paper-area", 
      $(this).css({ 
       // position: "relative", 
      }); 
     }, 
}).resizable({ 
      containment: ".paper-area", 
      start: function(e, ui) { 
      // alert($(".paper-area").width()); 
      containment: ".paper-area", 
      $(this).css({ 
      // position: "relative", 
      }); 
      }, 
      stop: function(e, ui) { 
      containment: ".paper-area", 
      $(this).css({ 
       //position: "relative", 
      }); 
      } 
}); 

CSS： -

.paper-area { 
    border: 1px solid #E4E3E3; 
    height: 290px; 
    margin: 48px auto 0; 
    width: 400px; 
} 
.upload-logo { 
    background: none repeat scroll 0 0 #626262; 
    color: #7B7B7B; 
    height: 98px; 
    margin: 0 auto; 
    text-shadow: 1px 1px 2px #FFFFFF; 
    width: 99px; 
} 

JSFiddle

Answer 1

有两个主要问题（见更新的小提琴：http://jsfiddle.net/BPQQN/7/）：

- 收容区域实际上并不包含灰色矩形。为了解决这个问题，我改变了HTML来：

<div class="paper-area" id="paper_area"> 

<div class="upload-logo drag">Upload Logo</div> 
</div> 

-the灰色矩形蹦来跳去拖就开始，因为它有margin: 0 auto;删除的保证金和它的工作。

小提琴的当前状态可能不是您想要实现的。最终结果应该是什么？

Answer 2

http://jsfiddle.net/BPQQN/8/

HTML：

<div class="paper-area" id="paper_area"> 
    <div class="upload-logo drag">Upload Logo</div> 
</div> 

CSS：

.upload-logo { 
     position:absolute;