jquery实现的拖动效果问题
借助jquery实现对某个物体的拖动,虽然实现了,但感觉用其狠不爽,快速的上下拖动就会脱轨,bug太多了呵呵,还是用jquery自带的拖动爽。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DIV+CSS模拟表格拖动效果 </title> <script type="text/javascript" src="jquery1.3.2.js"></script> <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script> <style type="text/css"> #usertable { position:absolute; width:700px; height:165px; list-style:none; left:340px; top:300px; } #usertable li { border-left:1px solid #ccc; border-top:1px solid #ccc; float:left; width:130px; height:33px; text-align:center; line-height:33px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; } #usertable li.h { background-color: green; } #stutable { position:absolute; width:700px; height:165px; list-style:none; left:340px; top:100px; } #stutable li { border-left:1px solid #ccc; border-top:1px solid #ccc; float:left; width:130px; height:33px; text-align:center; line-height:33px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; } #stutable li.h { background-color: background; } </style> <script type="text/javascript"> var status = false; function domousemove(e) { var e = e || event; $("#mouseX").val(e.clientX); $("#mouseY").val(e.clientY); $("#endX").val(e.clientX); $("#endY").val(e.clientY); var xspace = parseInt($("#endX").val())-parseInt($("#initX").val()); var yspace = parseInt($("#endY").val())-parseInt($("#initY").val()); $("#xspace").val(xspace); $("#yspace").val(yspace); if(status == true){ var endLeft = parseInt($("#initLeft").val())+xspace+"px"; var endTop = parseInt($("#initTop").val())+yspace+"px"; $("#endLeft").val(endLeft); $("#endTop").val(endTop); $("#usertable").css("left",endLeft); $("#usertable").css("top",endTop); } } function domousedown(e){ $("#usertable").css("cursor","move"); $("#status").val("拖动"); status = true; $("#initX").val(e.clientX); $("#initY").val(e.clientY); } function domouseup(e){ $("#status").val("停止"); $("#usertable").css("cursor","auto"); status = false; $("#initLeft").val($("#endLeft").val()); $("#initTop").val($("#endTop").val()); } function domouseout(){ $("#status").val("停止"); $("#usertable").css("cursor","auto"); status = false; var endLeft = $("#endLeft").val(); var endTop = $("#endTop").val(); if(endLeft!=""&&endTop!=""){ $("#initLeft").val(endLeft); $("#initTop").val(endTop); } } $(document).ready( function() { $("#usertable").mousedown(domousedown) .mouseup(domouseup) .mousemove(domousemove); //.mouseout(domouseout); $("#stutable").draggable(); $("#initLeft").val($("#usertable").css("left")); $("#initTop").val($("#usertable").css("top")); }); </script> </head> <body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()"> <div id="main"> <ul id="usertable" > <li class="h">姓名</li> <li class="h">年龄</li> <li class="h">生日</li> <li class="h">性别</li> <li class="h">籍贯</li> <li>foerver</li> <li>22</li> <li>1986-08-11</li> <li>男</li> <li>四川</li> <li>foerver</li> <li>22</li> <li>1986-08-11</li> <li>男</li> <li>四川</li> <li>foerver</li> <li>22</li> <li>1986-08-11</li> <li>男</li> <li>四川</li> <li>foerver</li> <li>22</li> <li>1986-08-11</li> <li>男</li> <li>四川</li> </ul> <ul id="stutable" > <li class="h">姓名</li> <li class="h">年龄</li> <li class="h">生日</li> <li class="h">性别</li> <li class="h">籍贯</li> <li>foerver</li> <li>22</li> <li>1986-08-11</li> <li>男</li> <li>四川</li> <li>foerver</li> <li>22</li> <li>1986-08-11</li> <li>男</li> <li>四川</li> <li>foerver</li> <li>22</li> <li>1986-08-11</li> <li>男</li> <li>四川</li> <li>foerver</li> <li>22</li> <li>1986-08-11</li> <li>男</li> <li>四川</li> </ul> <div> 初始鼠标点击坐标x:<input type="text" id="initX" value="0"/><br/> 初始鼠标点击坐标y:<input type="text" id="initY" value="0"/><br/> 结束鼠标释放坐标x:<input type="text" id="endX" value="0"/><br/> 结束鼠标释放坐标y:<input type="text" id="endY" value="0"/><br/> 横坐标移动距离:<input type="text" id="xspace"/><br/> 纵坐标移动距离:<input type="text" id="yspace"/><br/> 表格状态:<input type="text" id="status"/><br/> 当前鼠标x:<input type="text" id="mouseX" /><br/> 当前鼠标y:<input type="text" id="mouseY" /><br/> 表格初始left:<input type="text" id="initLeft" /><br/> 表格初始top:<input type="text" id="initTop" /><br/> 表格结束left:<input type="text" id="endLeft" /><br/> 表格结束top:<input type="text" id="endTop" /><br/> </div> </div> </body> </html>