一直以来都认为拖拽是一件很神奇的事情,今天终于有机会了解一下它的原理,这只是 一个简单的例子,还需要很多的优化、改进。
基本原理如下:
拖拽状态 = 0 鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的x和y坐标 记录下元素的x和y坐标 } 鼠标在元素上移动的时候{ 如果拖拽状态是0就什么也不做。 如果拖拽状态是1,那么 元素y = 现在鼠标y - 原来鼠标y + 原来元素y 元素x = 现在鼠标x - 原来鼠标x + 原来元素x } 鼠标在任何时候放开的时候{ 拖拽状态 = 0 }
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drag and Drop</title> <script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"> </script> <script type="text/javascript"> $(function(){ var state = { draging: false, mouseX: 0, mouseY: 0, objX: 0, objY: 0 }; $("div").bind("mousedown", state, down).bind("mousemove", state, move).mouseover(over); $(document).bind("mouseup", state, up); }); //处理鼠标被按下事件 function down(event){ event.data.draging = true; event.data.mouseX = parseInt(event.clientX); event.data.mouseY = parseInt(event.clientY); event.data.objX = parseInt($(this).css("top")); event.data.objY = parseInt($(this).css("left")); } //处理鼠标移动事件 function move(event){ state = event.data; if (state.draging) { $(this).css("top", event.clientY - state.mouseX + state.objY) $(this).css("left", event.clientX - state.mouseY + state.objX) } } //处理鼠标被在拖拽元素上 function over(event){ $(this).css("cursor", "move") } //处理鼠标被放开事件 function up(event){ event.data.draging = false; } </script> <style type="text/css"> div { width: 200px; height: 200px; background-color: #999999; position: absolute; top: 0px; left: 0px; } </style> </head> <body> <div> </div> </body> </html>