本來是想寫個包含碰撞，慣性等物理模型的引擎的，但是寫了幾句就不想搞了，太麻煩，而且工作也忙，就隨便寫了下，實現了拖拽小方塊，釋放之後，根據釋放時的速度慣性移動一段距離，帶碰撞的。
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，暈菜了。