Вот быстрый jsfiddle
В основном, он использует простую формулу 1 / (x+1).Это асимптотическая кривая, означающая, что y → 0 для x → infinity (для x >= 0).Таким образом, y всегда приближается к нулю, но никогда не достигает этого.
x в данном случае - это расстояние, на которое перетаскивается мышь, а y используется для масштабирования вектора перетаскивания.Таким образом, чем дальше перемещается мышь, тем меньше будет перемещаться перетаскиваемый элемент, поскольку y становится все ближе и ближе к нулю.
Поэтому, если мышь перетаскивают лишь немного, перетаскиваемый элемент в значительной степени удерживается.Но чем дальше вы перетаскиваете его, тем меньше оно будет следовать.
Кстати, похоже, что пример, к которому вы привязаны, просто вдвое сокращает расстояние перемещения.Так что, если вы перетащите его на 100 пикселей, он переместится на 50 пикселей.Это более простое решение, но другое поведение, поскольку оно линейное.Мое решение состоит в том, чтобы сделать перетаскиваемое движение экспоненциально меньше, чем дальше вы (пытаетесь) перетащить его, так что это другой тип поведения.
jQuery
var halfDist = 150, // the mouse distance at which the mouse has moved
// twice as far as the draggable
centerX = 150, // where to anchor the draggable
centerY = 150;
$("#draggable").draggable({
drag: function(event, ui) {
var x, y, dist, ratio, factor;
x = ui.position.left - centerX;
y = ui.position.top - centerY;
dist = Math.sqrt(x*x + y*y);
ratio = dist / halfDist
factor = 1 / (ratio + 1);
x *= factor;
y *= factor;
ui.position.left = x + centerX;
ui.position.top = y + centerY;
}
});
HTML
<div id="arena">
<div id="draggable"/>
</div>
CSS
#arena {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
#draggable {
width: 20px;
height: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
}
Благодаря j08691 за то, что вы взяли код из jsfiddle и разместили его здесь