С концептуальной точки зрения (скоро я буду разбит фактическим кодом), я бы зарегистрировал координаты мыши в MouseDown и сравнил их с координатами мыши в MouseUp, чтобы определить угол, на который нужно переместить div (это позволит DIV продолжать движение в правильном направлении, даже когда MouseUp был близко к DIV).
Более простым способом было бы просто переместить квадрат к координатам MouseUp (т.е. координаты мыши не имеют большого значения в небольшом DIV), но это не сработает, если MouseUp очень близко к MouseDown .
В любом случае используйте что-то вроде этого ответа ( Как заставить div или объект постепенно перемещаться в точку щелчка мышью с помощью javascript? ), за исключением MouseUp / MouseRelease вместо щелчка, в идеале к проецируемой точке (вдоль линии между MouseDown и MouseUp на указанном расстоянии).
Редактировать
Я включил пример прототипа ниже (он очень спешит и может использовать множество оптимизаций + более четкую концепцию различий между осью y страницы / графика, а также некоторую лучшую обработку крутых склонов, а также расчет расстояния перебрасывать в зависимости от расстояния между mousedown / mouseup, как об этом упоминает fauxtrot в комментариях, а также, возможно, отключить перебрасывание после первого сброса, поскольку вы можете продолжать «перебрасывать его» в данный момент, а также проверки «вне границ» и, возможно, наоборот отскакивая от краев).
Пример выполнения: http://jsfiddle.net/9B9sA/
HTML
<div id="bluebox"
style="width:100px;
height:100px;
background-color:blue;
position:absolute;
left:300px;
top:300px;"> </div>
jQuery (включая пользовательский интерфейс jQuery для анимации)
var startDownX, startDownY;
$(document).ready(function() {
/* Stop default Firefox etc. drag */
$(document).bind("dragstart", function() {
return false;
});
/* Capture start of flings */
$('#bluebox').mousedown(function (event) {
startDownX = event.pageX;
startDownY = event.pageY;
});
/* Work out fling direction on end of fling */
$(document).mouseup(function(event){
/* Page y-axis is different from graph */
var rise = -(event.pageY - startDownY);
var run = event.pageX - startDownX;
var newX = $('#bluebox').position().left;
var newY = $('#bluebox').position().top;
var distanceToFling = 100;
if (run == 0 || Math.abs(rise/run) > 3) {
if (rise > 0) {
newY -= distanceToFling;
} else if (rise < 0) {
newY += distanceToFling;
}
}
else {
if (run > 0) {
newX += distanceToFling;
newY -= (rise/run) * distanceToFling;
}
else {
newX -= distanceToFling;
newY += (rise/run) * distanceToFling;
}
}
$('#bluebox').animate({
left: newX,
top: newY
}, 1000);
}); });