0

divのサイズ変更とドラッグにjQueryUI Draggable and Resizableを使用しています。サイズを変更するとコンテナの外に飛び出すなど、奇妙な動作が発生します。どうすれば修正できますか。どんな助けでも感謝されるべきです。

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

4

2 に答える 2

0

2 つの大きな問題がありました (更新されたフィドルを参照してください: 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;-マージンを削除して機能したため、ドラッグ開始時に灰色の長方形が飛び回りました 。

フィドルの現在の状態は、おそらくあなたが達成しようとしていたものではありません。最終結果はどうあるべきですか？

于 2013-10-29T12:22:16.880 に答える
0

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;
于 2013-10-29T12:27:17.107 に答える