js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数

一个完美的JS拖拽功能，实现层在网页上任意拖动，还可回放拖动规迹，而且在拖动时显示拖动距离参数等相关属性。经本人测试兼容性也是相当不错的代码，学习JavaScript的朋友，可以拿来研究研究，您可不要错过哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>完美拖拽</title><style type="text/css"> html,body{overflow:hidden;} body,div,h2,p{margin:0;padding:0;} body{color:#fff;background:#000;font:12px/2 Arial;} p{padding:0 10px;margin-top:10px;} span{color:#ff0;padding-left:5px;} #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;} #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;} #box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;} </style></head><body> <div id="box"> <h2><a href="javascript:;">点击回放拖动轨迹</a></h2><p><strong>Drag:</strong><span></span></p><p><strong>offsetTop:</strong><span></span></p><p><strong>offsetLeft:</strong><span></span></p></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上就是js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数的详细内容，更多请关注0133技术站其它相关文章！