jquery简单的拖动效果实现原理及示例


Posted in Javascript onJuly 26, 2013
<!DOCTYPE html> 
<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简单拖?鲈?硎道?lt;/title> 
<style type="text/css"> 
#drag{width:400px;height:300px;background:url(http://upload.yxgz.cn/uploadfile/2009/0513/20090513052611873.jpg);cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;} 
h2{color:#fff;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#FFFFFF;height:40px;line-height:40px;margin:0;} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
/*--------------拖曳效果---------------- 
*原理:标记拖曳状态dragging ,坐标位置iX, iY 
* mousedown:fn(){dragging = true, 记录起始坐标位置,设置鼠标捕获} 
* mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置,绝对定位的元素获得差值} 
* mouseup:fn(){dragging = false, 释放鼠标捕获,防止冒泡} 
*/ 
var dragging = false; 
var iX, iY; 
$("#drag").mousedown(function(e) { 
dragging = true; 
iX = e.clientX - this.offsetLeft; 
iY = e.clientY - this.offsetTop; 
this.setCapture && this.setCapture(); 
return false; 
}); 
document.onmousemove = function(e) { 
if (dragging) { 
var e = e || window.event; 
var oX = e.clientX - iX; 
var oY = e.clientY - iY; 
$("#drag").css({"left":oX + "px", "top":oY + "px"}); 
return false; 
} 
}; 
$(document).mouseup(function(e) { 
dragging = false; 
$("#drag")[0].releaseCapture(); 
e.cancelBubble = true; 
}) }) 
</script> 
</head> 
<body> 
<div id="drag"> 
<h2>来拖动我啊</h2> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
easyui validatebox验证
Apr 29 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
js监听键盘事件示例代码
Jul 26 #Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 #Javascript
固定表格行列(expression)在IE下适用
Jul 25 #Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 #Javascript
不使用浏览器运行javascript代码的方法
Jul 24 #Javascript
js展开闭合效果演示代码
Jul 24 #Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 #Javascript
You might like
为PHP初学者的8点有效建议
2010/11/20 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python3中编码获取网页的实例方法
2020/11/16 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
创意婚礼策划方案
2014/05/18 职场文书
大学生个人求职信
2014/06/02 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
开场白怎么写
2015/06/01 职场文书
地道战观后感300字
2015/06/04 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
python3操作redis实现List列表实例
2021/08/04 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏