jQuery实现了一个拖拽小东西的程序
2008-10-20 20:37
316 查看
本来是想写个包含碰撞，惯性等物理模型的引擎的，但是写了几句就不想搞了，太麻烦，而且工作也忙，就随便写了下，实现了拖拽小方块，释放之后，根据释放时的速度惯性移动一段距离，带碰撞的。
drag.html:
<html>
<head>
<title>-----drag-----</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript'>
var keyDown = false;//鼠标是否按下
var start = new position();
var end = new position();//鼠标释放时的位置
var track = [];//路径
var stamp = [];//时间点
var startTime;
$(document).ready(function() {
$('#box').css({width:'20px',height:'20px',background:'red',position:'absolute',left:'100px',top:'200px'}).bind('mousedown', down); //绑定鼠标按下事件
$(this).bind('mousemove', move).bind('mouseup', release);//页面绑定鼠标移动和释放事件
});
function down() {//鼠标按下
keyDown = true;
}
function move() {//移动
if(keyDown) {
drag();
}
else if(end.x != undefined &&end.y != undefined) {
//speed = (track[track.length-3].x - track[track.length-1].x)/(stamp[stamp.length-3] - stamp[stamp.length-1]);//速度
detx = (track[track.length-1].x - track[track.length-3].x)*5 - 10;
dety = (track[track.length-1].y - track[track.length-3].y)*5 - 10;
$('#box').animate({
left: stopX(end.x + detx*2/10),
top: stopY(end.y + dety*2/10)
}, 10).animate({
left: stopX(end.x + detx*5/10),
top: stopY(end.y + dety*5/10)
}, 50).animate({
left: stopX(end.x + detx*8/10),
top: stopY(end.y + dety*8/10)
}, 80).animate({
left: stopX(end.x + detx),
top: stopY(end.y + dety)
}, 100);
end.x = end.y = undefined;
track = [];//清空数组
stamp = [];
}
function stopX(x) {
if(x < 0) x=-x;
if(x > 986) x=2*986-x;
return x;
}
function stopY(y) {
if(y < 0) y=-y;
if(y > 589) y=2*589 - y;
return y;
}
}
function drag() {//拖动
var time = 0;
//if(startTime != undefined) time = new Date().getTime() - startTime;
var speed = 0;
var x = event.x-10;
var y = event.y-10;//-10把鼠标放到box的中间
track.push(new position(x,y));//将点放入轨迹数组中
stamp.push(new Date().getTime());//时间放入时间点数组中
stopOver() //阻止越界
//$('#box').css({left: x,top:y});
$('#box').animate({
left: x,
top: y
}, 0.1);
function stopOver() {
if(x < 0) x=-x;
if(x > 986) x=2*986-x;
if(y < 0) y=-y;
if(y > 589) y=2*589 - y;
}
}
function release() {//鼠标释放
keyDown = false;
end.x = event.x;
end.y = event.y;
}
function position(x, y) {//坐标
this.x = x;
this.y = y;
}
</script>
</head>
<body>
<div id='box'></div>
</body>
</html>
同样，jquery就不贴了，网上可以下。惯性效果显示的还是不怎么理想，只在ie中测试，其他浏览器中未测试。
11月1日更新：
今天整理乱七八糟的程序，发现了这个，又试了下，居然不好使了。弄了几个小时，简直快崩溃的时候，发现居然是编码的问题。页面charset是utf-8，而文件保存的时候用的是ansi，晕菜了。
drag.html:
<html>
<head>
<title>-----drag-----</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript'>
var keyDown = false;//鼠标是否按下
var start = new position();
var end = new position();//鼠标释放时的位置
var track = [];//路径
var stamp = [];//时间点
var startTime;
$(document).ready(function() {
$('#box').css({width:'20px',height:'20px',background:'red',position:'absolute',left:'100px',top:'200px'}).bind('mousedown', down); //绑定鼠标按下事件
$(this).bind('mousemove', move).bind('mouseup', release);//页面绑定鼠标移动和释放事件
});
function down() {//鼠标按下
keyDown = true;
}
function move() {//移动
if(keyDown) {
drag();
}
else if(end.x != undefined &&end.y != undefined) {
//speed = (track[track.length-3].x - track[track.length-1].x)/(stamp[stamp.length-3] - stamp[stamp.length-1]);//速度
detx = (track[track.length-1].x - track[track.length-3].x)*5 - 10;
dety = (track[track.length-1].y - track[track.length-3].y)*5 - 10;
$('#box').animate({
left: stopX(end.x + detx*2/10),
top: stopY(end.y + dety*2/10)
}, 10).animate({
left: stopX(end.x + detx*5/10),
top: stopY(end.y + dety*5/10)
}, 50).animate({
left: stopX(end.x + detx*8/10),
top: stopY(end.y + dety*8/10)
}, 80).animate({
left: stopX(end.x + detx),
top: stopY(end.y + dety)
}, 100);
end.x = end.y = undefined;
track = [];//清空数组
stamp = [];
}
function stopX(x) {
if(x < 0) x=-x;
if(x > 986) x=2*986-x;
return x;
}
function stopY(y) {
if(y < 0) y=-y;
if(y > 589) y=2*589 - y;
return y;
}
}
function drag() {//拖动
var time = 0;
//if(startTime != undefined) time = new Date().getTime() - startTime;
var speed = 0;
var x = event.x-10;
var y = event.y-10;//-10把鼠标放到box的中间
track.push(new position(x,y));//将点放入轨迹数组中
stamp.push(new Date().getTime());//时间放入时间点数组中
stopOver() //阻止越界
//$('#box').css({left: x,top:y});
$('#box').animate({
left: x,
top: y
}, 0.1);
function stopOver() {
if(x < 0) x=-x;
if(x > 986) x=2*986-x;
if(y < 0) y=-y;
if(y > 589) y=2*589 - y;
}
}
function release() {//鼠标释放
keyDown = false;
end.x = event.x;
end.y = event.y;
}
function position(x, y) {//坐标
this.x = x;
this.y = y;
}
</script>
</head>
<body>
<div id='box'></div>
</body>
</html>
同样，jquery就不贴了，网上可以下。惯性效果显示的还是不怎么理想，只在ie中测试，其他浏览器中未测试。
11月1日更新：
今天整理乱七八糟的程序，发现了这个，又试了下，居然不好使了。弄了几个小时，简直快崩溃的时候，发现居然是编码的问题。页面charset是utf-8，而文件保存的时候用的是ansi，晕菜了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 懒人部署插件实现智能、可视化更新程序，让用户不用一个文件一个文件的拷贝，有效防止少、漏更新，同时实现自动备份覆盖的文件，便于随时还原
- 完成一个学生管理程序，使用学号作为键添加5个学生对象，并可以将全部信息保存在文件中，可以实现对学生信息的学号查找，输出全部学生信息的功能。
- jsp 中用jquery 实现ajax 一个简单例子
- jquery实现弹出确认是否删除的一个简单代码
- JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
- JQuery 无插件实现seclet option标签的拖拽放置
- Html5 Canvas+Javascript实现一个简单画图程序（三）
- jquery实现的一个文章自定义分段显示功能
- jquery Pagination.js 实现分页程序
- 题目： 编写一个程序，实现设置上月、本月电表读数，显示上月、本月电表读数，计算并显示本月用电数。假设每度电的价格为1.2元，计算并显示本月电费。
- 编写一个程序 用宏实现两个数的比较大小
- 编译原理实验，实现一个代码解析程序
- 一个无限加载瀑布流jquery实现
- jquery或者js实现两个下拉列表框只可以选择其中一个
- VC 实现程序只运行一个实例，并激活已运行的程序
- jQuery实现的一个tab切换效果内部还嵌有切换
- 编写一个程序，实现顺序表的各种基本运算
- Android中实现“程序前后台切换效果”和“返回正在运行的程序，而不是一个新Activity”
- 想要在我的程序中实现一个按钮clic…
- 编写一个程序，实现设置上月、本月电表读数，显示上月、本月电表读数，计算并显示本月用电数。假设每度电的价格为1.2元，计算并显示本月电费。