4

コンテナ内にスライド式のサイズ変更可能なバーを作成しようとしています。何らかの理由で、サイズ変更可能なメソッドは、divをPosition：RelativeからPosition：Absoluteに変換しています。これにより、ボックスが視覚的に移動し、コンテナのコンテナのスクロールアクションが台無しになります。

JSFiddleの例

Stop and Resizeイベントにフックして、Position：Relativeに変換して戻しましたが、これはかなりのハックであり、結果は完全ではありません。これでうまくいくようですが？

JQuery：

$(document).ready(function () {
    $(".Timeline").draggable({
        axis: "x",
        containment: "parent"
    })
    .resizable({
        containment: "parent",
        handles: 'e, w'
    });
});

HTML：

<div style="width: 800px; overflow: auto;">
    <div id="TimelineCanvas">
        <div class="TimelineContainer">
            <div class="Timeline">
            </div>
        </div>
    </div>
</div>

スタイル：

#TimelineCanvas
{
    width: 2000px;
    height: 150px;
}
.TimelineContainer
{
    height: 75px;
    width: 100%;
    border: 1px solid black;
}
.Timeline
{
    position: relative;
    height: 75px;
    width: 75px;
    background-color: Gray;
    cursor: move;
}

これまでの修正での私の最善の試み：

$(document).ready(function () {
    $(".Timeline").draggable({
        axis: "x",
        containment: "parent"
    })
    .resizable({
        containment: "parent",
        handles: 'e, w',
        resize: function (event, ui) {
            $(this).css("height", '');
        },
        stop: function (event, ui) {
            $(this).css("position", '');
            $(this).css("top", '');
            $(this).css("height", '');
        }
    });
});

どんな助けでもいただければ幸いです。ありがとう！

4

4 に答える 4

2 
.resizable({
        grid: 25,
        containment: "#"+ $(this).parent().attr("id"), // The parent
        stop: function(e, $this) {
            $(this).css({
                position: "relative",
                left: $this.originalPosition.left,
                width:$this.originalSize.width
            });
        }
    })

それはそれをすることであるべきthe right wayです。しかし、確かにそうではありません（位置幅の競合があるためdraggable、常に何かが壊れますre sizable）、Jquery-ui2.0を待つ必要があります...

于 2012-11-23T03:13:20.860 に答える
1

なぜそれが起こったのかについての元の欠陥レポートを見つけることができませんでしたが、それはかなり明らかに意図的であり、おそらくブラウザ固有です...汚い解決策があなたが持っている最善かもしれません。

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.resizable.js#L242

  // bugfix for http://dev.jquery.com/ticket/1749
  if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
      el.css({position: 'absolute',top: iniPos.top,left: iniPos.left});
  }
于 2012-07-25T04:27:43.520 に答える
0

これが元のjQueryUIチケットと更新されたリンクです。コードで参照されているチケットが正しくありません。

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.resizable.js#L299

// bugfix for http://dev.jquery.com/ticket/1749
if ( (/absolute/).test( el.css("position") ) ) {
    el.css({ position: "absolute", top: el.css("top"), left: el.css("left") });
} else if (el.is(".ui-draggable")) {
    el.css({ position: "absolute", top: iniPos.top, left: iniPos.left });
}
于 2013-05-06T14:47:20.550 に答える
0

サイズ変更可能なオブジェクトのpositionプロパティを！importantに設定できます

于 2020-03-20T12:25:03.583 に答える