基于jquery完美拖拽,可返回拖动轨迹


Posted in Javascript onMarch 29, 2012
<!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:150px; 
left:400px; 
margin:0; 
} 
#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> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
var bDrag = false; 
var _x,_y; 
var $box=$("#box") 
var aPos = [{ 
x: $("#box").offset().left, 
y: $("#box").offset().top 
}]; 
$("span:eq(1)").text(aPos[0].y); 
$("span:eq(2)").text(aPos[0].x); 
$("#box h2:first").mousedown(function(event){ 
var e=event || window.event; 
bDrag = true; 
_x=e.pageX-$box.position().left; 
_y=e.pageY-$box.position().top; 
return false 
}) 
$(document).mousemove(function(event){ 
if(!bDrag) return false; 
var e=event || window.event; 
var x=e.pageX-_x; 
var y=e.pageY-_y; 
var maxL = $(document).width() - $box.outerWidth(); 
var maxT = $(document).height() - $box.outerHeight(); 
x = x < 0 ? 0: x; 
x = x > maxL ? maxL: x; 
y = y < 0 ? 0: y; 
y = y > maxT ? maxT: y; 
$box.css({left:x,top:y}); 
aPos.push({ 
x: x, 
y: y 
}); 
status() 
return false 
}).mouseup(function(){ 
bDrag = false; 
status() 
return false 
}) 
$("#box h2:first a").click(function(){ 
if (aPos.length == 1) return; 
var timer = setInterval(function() { 
var oPos = aPos.pop(); 
oPos ? ($box.css({left : oPos.x + "px", top : oPos.y + "px"})) : clearInterval(timer) 
status(); 
},30); 
}).mousedown(function(){return false}) 
function status() { 
$("#box span:eq(0)").text(bDrag); 
$("#box span:eq(1)").text($box.position().top); 
$("#box span:eq(2)").text($box.position().left); 
} 
status() 
}) 
</script> 
</head> 
<body> 
<div id="box"> 
<h2><a href="javascript:;">点击回放拖动轨迹</a></h2> 
<p><strong>Drag:</strong><span></span></p> 
<p><strong>top:</strong><span></span></p> 
<p><strong>left:</strong><span></span></p> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
Vue项目安装插件并保存
Jan 28 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
Javascript面向对象扩展库代码分享
Mar 27 #Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 #Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 #Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 #Javascript
jquery星级插件、支持页面中多次使用
Mar 25 #Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 #Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 #Javascript
You might like
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
jQuery事件用法详解
2016/10/06 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
JS严格模式知识点总结
2018/02/27 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python 加密的实例详解
2017/10/09 Python
简单谈谈python基本数据类型
2018/09/26 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Python configparser模块操作代码实例
2020/06/08 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
电子商务专业推荐信范文
2013/12/02 职场文书
就职演讲稿范文
2014/05/19 职场文书
庆祝儿童节标语
2014/10/09 职场文书
医生见习报告范文
2014/11/03 职场文书
实习协议书
2015/01/27 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang