jquery UI のドラッグ可能機能は、何かを画面外にドラッグしようとすると画面がスクロールする場合を除いて、うまく機能しています。次に、選択したアイテムがどこにあるかわからないようにジャンプします。もう見ることはできません。これをトラブルシューティングする方法を知っている人はいますか? ありがとうございました。
現在、jquery-ui-1.8.24 と jquery-1.8.2 を使用しています。
jquery UI のドラッグ可能機能は、何かを画面外にドラッグしようとすると画面がスクロールする場合を除いて、うまく機能しています。次に、選択したアイテムがどこにあるかわからないようにジャンプします。もう見ることはできません。これをトラブルシューティングする方法を知っている人はいますか? ありがとうございました。
現在、jquery-ui-1.8.24 と jquery-1.8.2 を使用しています。
jQuery-ui を使用する場合、要素スタイルはあるappendTo
べきであることに注意してくださいposition: relative
draggable
jQueryでこれに対する解決策を見つけることができなかった後、私は独自のドラッグを実装しました - 私にとってはうまくいきます。また、jQuery UI を削除することもできました。これは素晴らしいことでした。draggable と handle は jquery 要素であり、 limits はオブジェクトであることに注意してください。ここにコードがあります -
function initializeDrag(draggable, handle, limits) {
var initialMousePosition, initialDraggablePosition;
handle.on('mousedown', function (e) {
initialMousePosition = {
x: e.pageX,
y: e.pageY
};
initialDraggablePosition = {
top: parseInt(draggable.css('top'), 10),
left: parseInt(draggable.css('left'), 10)
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
function onMouseMove(e) {
var verticalDelta = e.pageY - initialMousePosition.y;
var horizontalDelta = e.pageX - initialMousePosition.x;
var topRes = initialDraggablePosition.top + verticalDelta;
var leftRes = initialDraggablePosition.left + horizontalDelta;
topRes = Math.max(topRes, limits.top);
topRes = Math.min(topRes, limits.bottom);
leftRes = Math.max(leftRes, limits.left);
leftRes = Math.min(leftRes, limits.right);
draggable.css({
top: topRes + 'px',
left: leftRes + 'px'
});
}
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
}