本来是想写个包含碰撞，惯性等物理模型的引擎的，但是写了几句就不想搞了，太麻烦，而且工作也忙，就随便写了下，实现了拖拽小方块，释放之后，根据释放时的速度惯性移动一段距离，带碰撞的。
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，晕菜了。