我如何轻弹DIV并将其向正确的方向移动？ [英] How do I flick a DIV and have it move in the right direction?

问题描述

如果我有一个5x5的格子或其他东西。我希望能够点击它，然后按住鼠标，向一个方向移动它，然后在释放鼠标时，让div向我轻弹的方向飞行。我怎样才能完成这与jQuery或JavaScript？不知道是否有一个算法或逻辑背后。

解决方案

从概念角度来看（我会用实际代码no我会在MouseDown上注册鼠标坐标，并将它们与MouseUp上的鼠标坐标进行比较，以确定移动div的角度（这将允许DIV继续以正确的方向移动，即使MouseUp是接近DIV）。

更简单的方法是将方块移动到MouseUp坐标上（即鼠标下的坐标在小DIV中并不重要） ，但是如果MouseUp非常接近MouseDown，那么这种方式并不适用。

无论哪种方式，使用类似这样的答案（如何制作一个div或者物体逐渐移动到用javascript点击鼠标的点？），除了MouseUp / MouseRelease，而不是点击，理想情况下朝着投影点（沿着MouseDown和MouseUp之间的一条特定距离）。

编辑

我在下面包含了一个原型示例（它非常匆忙，可以使用大量的优化+图形y轴，以及一些更好的处理陡坡，以及根据mousedown / mouseup之间的距离来计算距离投掷的距离，作为评论中提及的fauxtrot，并且可能在第一次投掷后禁用投掷，因为您可以保留扔在它周围目前，以及越界检查，也许反向反弹）。

运行示例： http://jsfiddle.net/9B9sA/

宽度：100像素;
height：100px;
background-color：blue;
位置：绝对;
left：300px;
top：300px;>< / div>

包括用于动画的jQuery UI）

  var startDownX，startDownY; 
 
 $ ）.ready（function（）{
 
 / *停止默认Firefox等drag * / 
 $（document）.bind（dragstart，function（）{
 return false; 
}）; 
 
 / *开始闪动* / 
 $（'＃bluebox'）。mousedown（function（event）{
 startDownX = event.pageX; 
 startDownY = event.pageY; 
}）; 
 
 / *在fling结尾* / 
 $（document）中计算出投掷方向。 mouseup（function（event）{
 / * Page y轴与图不同* / 
 var rise =  - （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）{
 if（rise> 0）{
 newY  -  = distanceToFling; 
} else if（rise <0）{
 newY + = distanceToFling; 
} 
} 
 else {
 if（run> 0）{
 newX + = distanceToFling; 
 newY  -  =（上升/下降）* distanceToFling; 
} 
 else {
 newX  -  = distanceToFling; 
 newY + =（上升/下降）* distanceToFling; 
 
 
 $ b $（'＃bluebox'）。animate（{
 left：newX，$ b $ top：newY 
}， 1000）; 
}）; }）; 
  

If I have a div that is a 5x5 square or something. I want to be able to click on it, then while holding down the mouse, move it in a direction, and upon release of the mouse, have the div fly towards the direction i "flicked". How can I accomplish this with jquery or javascript? Not sure if an algorithm or logic is behind this.

解决方案

From a conceptual perspective (I'll be beaten with actual code no doubt shortly) I would register the mouse coordinates on MouseDown, and compare them against the mouse coordinates on MouseUp to determine the angle at which to move the div (this would allow the DIV to continue moving in the correct direction, even when the MouseUp was close to the DIV).

The easier way would be to just move the square towards the MouseUp coordinates (i.e. mouse down coordinates don't really matter in a small DIV), but this doesn't work as well if the MouseUp is very close to the MouseDown.

Either way, use something like this answer (How to make a div or object gradually move to point of mouseclick with javascript?), except on MouseUp/MouseRelease instead of click, ideally towards a projected point (along the line between MouseDown and MouseUp at a specified distance).

Edit

I've included a Prototype example below (it's very rushed and could use plenty of optimisations + clearer concept on the differences between Page/Graph y-axis, as well as some better handling of steep slopes, as well as calculating distance to fling based on distance between mousedown/mouseup as fauxtrot mentions in comments, as well as perhaps disabling fling after the first fling as you can keep "flinging it around" at the moment, as well as "out of bounds" checks and perhaps reverse bouncing off the edges).

Running Example: http://jsfiddle.net/9B9sA/

HTML

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

jQuery (including jQuery UI for animate)

    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并将其向正确的方向移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！