如何轻弹 DIV 并让它朝正确的方向移动？答案

【问题标题】：How do I flick a DIV and have it move in the right direction?如何轻弹 DIV 并让它朝正确的方向移动？
【发布时间】：2011-04-29 04:32:57
【问题描述】：

如果我有一个 5x5 正方形或其他的 div。我希望能够单击它，然后在按住鼠标的同时将其向一个方向移动，然后释放鼠标，让 div 朝着我“轻弹”的方向飞行。如何使用 jquery 或 javascript 完成此操作？不确定这背后是否有算法或逻辑。

【问题讨论】：

用非常仓促原型概念更新了我的答案。

标签： javascript jquery html

【解决方案1】：

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

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

无论哪种方式，使用类似这个答案 (How to make a div or object gradually move to point of mouseclick with javascript?)，除了在 MouseUp/MouseRelease 上而不是单击上，理想情况下朝向投影点（沿着 MouseDown 和 MouseUp 之间的线在指定距离处）。

编辑

我在下面包含了一个原型示例（它非常仓促，可以使用大量优化 + 更清晰的概念来处理页面/图形 y 轴之间的差异，以及更好地处理陡坡以及计算距离根据 fauxtrot 在 cmets 中提到的 mousedown/mouseup 之间的距离进行投掷，以及可能在第一次投掷后禁用投掷，因为此时您可以继续“投掷它”，以及“越界”检查，也许还可以逆转从边缘反弹）。

运行示例： 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 UI）

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

【讨论】：

您还可以使用手势的速度来确定 div 应该“轻弹”多远
@fauxtrot - 是的。如此多的其他潜在优化以及动量保持等。我做了一个小原型，玩起来很有趣，希望对 OP 有所帮助
我想我现在必须用它制作一个小 jQuery 插件，因为这很有趣..

【解决方案2】：

jquery 是你的朋友，这里有个不错的插件，check it out

【讨论】：

这允许拖动，而不是甩动 - 他需要沿着 MouseDown 和 MouseUp 之间的线计算一个 'x' 距离处的点以用于“甩动”