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;