Javascript 如何轻弹DIV并使其朝正确的方向移动？

如果我有一个5x5正方形的div或者别的什么。我希望能够点击它，然后在按住鼠标的同时，向一个方向移动它，释放鼠标后，让div朝我“轻弹”的方向飞行。如何使用jquery或javascript实现这一点？不确定这背后是否有算法或逻辑。

从概念角度来看（我很快就会被实际代码打败），我会在MouseDown上注册鼠标坐标，并将它们与MouseUp上的鼠标坐标进行比较，以确定移动div的角度（这将允许DIV继续沿正确方向移动，即使鼠标悬停在DIV附近）

更简单的方法是将正方形移向MouseUp坐标（即，在小DIV中，鼠标向下坐标并不重要），但如果MouseUp非常接近MouseDown，则这种方法也不起作用

无论哪种方式，都可以使用类似于此答案（）的内容，除了在MouseUp/mouseerelease上，而不是单击，理想情况下是朝向投影点（沿着MouseDown和MouseUp之间的线，以指定的距离）

编辑

我在下面包含了一个原型示例（这非常匆忙，可以使用大量优化+关于页面/图形y轴之间差异的更清晰概念，以及更好地处理陡坡，以及根据fauxtrot在评论中提到的mousedown/mouseup之间的距离计算到投掷的距离，以及可能在第一次投掷后禁用投掷作为y。）你现在可以继续“抛来抛去”，也可以进行“越界”检查，也许还可以从边缘反向反弹）

运行示例：

HTML

jQuery（包括用于动画的jQuery UI）

var startDownX，startDownY；
$（文档）.ready（函数（）{
/*停止默认Firefox等。拖动*/
$（document）.bind（“dragstart”，function（）{
返回false；
});
/*捕捉开始抛投*/
$（“#蓝盒”）.mousedown（函数（事件）{
startDownX=event.pageX；
startDownY=event.pageY；
});
/*在投掷结束时确定投掷方向*/
$（文档）.mouseup（函数（事件）{
/*页面y轴与图形不同*/
var上升=-（event.pageY-startDownY）；
var run=event.pageX-startDownX；
var newX=$（'#bluebox'）.position（）.left；
var newY=$（'#bluebox'）.position（）.top；
var distanceToFling=100；
如果（运行==0 | | Math.abs（上升/运行）>3）{
如果（上升>0）{
newY-=距离飞行；
}否则，如果（上升<0）{
newY+=距离飞行；
}
}
否则{
如果（运行>0）{
newX+=距离飞行；
新建-=（上升/运行）*距离飞行；
}
否则{
newX-=距离飞行；
新建+=（上升/运行）*距离飞行；
}
}
$（“#蓝盒”）。设置动画({
左：纽克斯，
上图：纽伊
}, 1000);
}); });

Jquery是你的朋友，这里有一个很好的插件，

允许拖动，而不是甩动-他需要计算鼠标向下和鼠标向上之间直线上“x”距离处的一个点，以便“甩动”。你还可以使用手势的速度来确定div应该“甩动”多远@fauxtrot-是的。当然。还有很多其他的潜在优化，比如动量保持。我已经推出了一个很有趣的小原型，希望能帮助OPI认为我现在必须用这个做一个jQuery插件，因为这很有趣。用一个非常匆忙的原型更新了我的答案当然。

<div id="bluebox" 
  style="width:100px;
  height:100px;
  background-color:blue;
  position:absolute;
  left:300px;
  top:300px;"> </div>

    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);
    }); });