1

私はこの状況を持っています: 特別な場所にドロップできるドラッグ可能なものがあります。私が説明した機能を備えたフィドルを用意しました: http://jsfiddle.net/8MGmb/

$('.widget').draggable({
    handle: '.bar',
    helper: 'clone',
    cursorAt: { top: 0 },
    refreshPositions: true,

    start: function () {
        $(this).css('visibility', 'hidden')
        $('body').addClass('dragging');
    },
    stop: function () {
        $(this).css('visibility', 'visible')
        $('body').removeClass('dragging');
    },
    revert: 'invalid',
    zIndex: 100,
});

.widget div にカーソルを合わせると、.bar 要素が表示されることがわかります。この種の要素は、ウィジェット全体のドラッグを開始するための「ハンドラ」です。最初に、.places が灰色の背景で表示され、ドラッグしている要素である .widget div がこの種の場所内でドロッパーになることがわかります。そのため、.widget が .placeにホバーすると、高くなります(クールな CSS3 トランジションを使用)。

そして、問題があります...より内側の .widgets (別の .widgets .container 内にある) をドラッグすると、それを上に移動して .place (上にある!) にカーソルを合わせると、ホバリングされた .place の新しい高さと同じ距離だけ下に移動します。

もともと私はヘルパーなしで構成を持っていました: http://jsfiddle.net/fRdks/1/問題の一部を解決することを目的としていますが、より内側の .widgets (最初のリンク!) では解決しません。

$('.widget').draggable({
    handle: '.bar',
    cursorAt: { top: 0 },
    refreshPositions: true,
    start: function () {
        $('body').addClass('dragging');
    },
    stop: function () {
        $('body').removeClass('dragging');
    },
    revert: 'invalid',
    zIndex: 100,
});

CSS の関係で body にヘルパーを配置できないと思いますが、これを解決する必要があります。これは jquery の正しい配置のバグだと思いますか?

どうもありがとう。

PD:既知のスクロール バグ (マスター ブランチで既に修正されている) を解決する目的で、フィドルの既定のファイルを使用する代わりに、最新の CDN jquery.uiとドラッグ可能およびドロップ可能な js ファイルを github から直接インポートしました。

4

0 に答える 0