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