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 相关文章推荐
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
再探JavaScript作用域
Sep 24 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
百度地图api如何使用
Aug 03 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
js获取页面description的方法
2015/05/21 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
Puppet的一些技巧
2018/09/17 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python中的浮点数原理与运算分析
2017/10/12 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python实现弹跳小球
2019/05/13 Python
python exit出错原因整理
2020/08/31 Python
python 实现端口扫描工具
2020/12/18 Python
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
大学校务公开实施方案
2014/03/31 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书