javascript - jQuery 拖动和调整大小

Question

我正在使用jQueryUI Draggable和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

There were two major problems (see updated fiddle: http://jsfiddle.net/BPQQN/7/):

-the containment area did not actually contain the grey rectangle. To fix this, I changed the html to:

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

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

-the grey rectangle jumped around on drag start because it had margin: 0 auto; Deleted the margin and it worked.

The current state of the fiddle is probably not what you were trying to achieve. What should be the final result?

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;