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

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

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

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

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

- 在拖动开始时，灰色矩形跳了起来，因为它有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;

jQuery拖动并调整大小

2 个答案: