7

私は次のマークアップをしました

<div class="row-fluid">
    <div class="span4">
        <ul class="test">
            <li>Arun</li>
            <li>Krishna</li>
            <li>Soundar</li>
        </ul>
    </div>
</div>

そしてcss

.test {
    height: 500px;
    margin-top: 10px;
    overflow-y: auto;
    padding: 10px 4px 70px;
}

そしてスクリプト

$('.test li').draggable({
    revert: 'invalid'
})

アイテムを右側にドラッグすると消えますが、なぜそうなっているのかわかりません。

overflow-y: auto;スタイルを削除すると、正常.testに機能します。

デモ：フィドルフィドル
で問題を再現するにはレスポンシブCSSがあるため、プレビュータブの幅を広げる必要がある場合があります

4

4 に答える 4

2

これは古い質問であることは知っていますが、答えを見つけたと思います。リストが消える理由は、それを div の端からドラッグして自動スクロールを開始するためです。したがって、次のように、クリックされたときにページのフローから削除するだけです。

$('.test li').draggable({
    revert: 'invalid'
}).mousedown(function() {
    var that = $(this);
    //create div to fill the vacated space
    $div = $('<div></div>');
    $div.width(that.width());
    $div.height(that.height());
    $div.insertAfter(that);
    //remove from flow of the page, set a different background color to see it work
    that.css({'position':'absolute'});
});

新しいフィドルはこちら

于 2013-09-07T18:19:39.640 に答える
0

必要なのは、「min-width：1100px」と「width：100％;」だけでした。

私はあなたのためにフィドルを更新しました

 Fiddle Link : http://jsfiddle.net/br57F/5/

その正常に動作します。オーバーフローはコンテンツで機能しますが、ドラッグ可能ですが、親divにコンテンツを追加しません。要素の実行時に位置を変更するだけです。

私はこれがうまくいくことを願っています:)

于 2013-03-19T06:36:24.637 に答える
0

上の CSS の問題bootstrap-combined.min.css。問題が発生するため、幅を設定します。

削除bootstrap-combined.min.cssして試してみてください。

ライブデモを参照

アップデート：

クラスに追加border: 1px solid;する.testと、実際の違いがわかります。コメントすると機能する理由overflow

firebug でデバッグすると、以下の CSS クラス (つまり からのものbootstrap-combined.min.css) が問題の原因であることがわかります。

.row-fluid .span4 {
    width: 31.4917%;
}
于 2013-03-19T06:15:29.547 に答える