2
jquery ui draggableを使用してdivをドラッグします。ドラッグが止まった後、ドラッグをスムーズに緩和する最善の方法は何ですか? ドラッグが突然停止したと仮定します。jquery ui draggable deaccelerate on stop
は
jquery ui draggableを使用してdivをドラッグします。ドラッグが止まった後、ドラッグをスムーズに緩和する最善の方法は何ですか? ドラッグが突然停止したと仮定します。jquery ui draggable deaccelerate on stop
は
があなたのために働くかもしれない緩和でdraggablesの実装をお願い致します。これが私の答えから、より特異的であった前のスレッドに単純化されたソリューションです:
HTML:
<div id="draggable">
</div>
CSS:
#draggable {
position: relative;
width: 100px;
height: 100px;
background-color: whitesmoke;
border: 2px solid silver;
}
Javascriptを:
$(function() {
$("#draggable").draggable({
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
var p = ui.helper.position();
$(this).stop().animate({
top: p.top,
left: p.left
},1000,'easeOutCirc');
}
});
});
jsFiddleデモ:http://jsfiddle.net/NJwER/26/
'position:relative;'はCSSで重大であり、それを捕まえるのに時間がかかりました! –
優れたソリューション - シンプルで、理解しやすく、効果的です。 –