私はこの状況を持っています: 特別な場所にドロップできるドラッグ可能なものがあります。私が説明した機能を備えたフィドルを用意しました: 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 から直接インポートしました。