如何轻弹DIV并让它向正确的方向移动?

时间:2011-04-29 04:32:57

标签: javascript jquery html

如果我有一个5x5平方或者什么的div。我希望能够点击它,然后在按住鼠标的同时向一个方向移动它,并且在释放鼠标时,让div朝着我“轻弹”的方向飞行。如何使用jquery或javascript完成此操作?不确定算法或逻辑是否落后于此。

2 个答案:

答案 0 :(得分:3)

从概念的角度来看(我很快就会被实际代码打败)我会在MouseDown上注册鼠标坐标,并将它们与MouseUp上的鼠标坐标进行比较,以确定移动div的角度(这即使当MouseUp接近DIV时,也会允许DIV继续朝正确的方向移动。

更简单的方法是将方块移向MouseUp坐标(即鼠标向下坐标在小DIV中并不重要),但如果MouseUp非常接近MouseDown,这也不行

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

修改

下面我已经包含了一个Prototype示例(非常匆忙,可以使用大量优化+更清晰的概念来解决Page / Graph y轴之间的差异,以及更好地处理陡坡,以及计算距离根据mousedown / mouseup之间的距离进行投掷,因为fotetrot在评论中提到,以及可能在第一次投掷后禁用投掷,因为此时你可以保持“甩掉它”,以及“越界”检查和可能逆转从边缘反弹。)

正在运行示例: 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);
    }); });

答案 1 :(得分:0)

Jquery是你的朋友,这是一个很好的插件,check it out