jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)


Posted in Javascript onJune 28, 2013

相对于上一篇,优化了拖拽的效果。
js代码:fun.js

_MoveObj = null;//全部变量,用来表示当前div 
z_index = 0;//z方向 
jQuery.fn.myDrag=function(){ 
_IsMove = 0; //是否移动 1.移动 
_MouseLeft = 0; //div left坐标 
_MouseTop = 0; //div top坐标 
$(document).bind("mousemove",function(e){ 
if(_IsMove==1){ 
$(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); 
} 
}).bind("mouseup",function(){ 
_IsMove=0; 
$(_MoveObj).removeClass("downMouse"); 
}); 
return $(this).bind("mousedown",function(e){ 
_IsMove=1; 
_MoveObj = this; 
var offset =$(this).offset(); 
_MouseLeft = e.pageX - offset.left; 
_MouseTop = e.pageY - offset.top; 
z_index++; 
_MoveObj.style.zIndex=z_index; 
$(_MoveObj).addClass("downMouse"); 
}); 
}

html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>demo.htm</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="myFun.js" type="text/javascript"></script> 
<style type="text/css"> 
.myDiv{ 
background:#EAEAEA; 
width: 100px; 
height: 100px; 
border: 1px solid; 
cursor: pointer; 
text-align: center; 
line-height: 100px; 
} 
.downMouse{ 
cursor:move; 
filter:alpha(Opacity=80); 
-moz-opacity:0.5; 
opacity: 0.5; 
background-color:#ffffff; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$(".myDiv").myDrag(); 
//$("#myDiv2").myDrag(); 
}) 
</script> 
</head> 
<body> 
<div id="myDiv1" class="myDiv">拖拽1</div> 
<div id="myDiv2" class="myDiv">拖拽2</div> 
<div id="myDiv3" class="myDiv">拖拽3</div> 
<div id="myDiv4" class="myDiv">拖拽4</div> 
<div id="myDiv5" class="myDiv">拖拽5</div> 
<div id="myDiv6" class="myDiv">拖拽6</div> 
<div id="show"></div> 
</body> 
</html>

jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Javascript 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
Ext JS添加子组件的误区探讨
Jun 28 #Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 #Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 #Javascript
js实时获取系统当前时间实例代码
Jun 28 #Javascript
js复制到剪切板的实例方法
Jun 28 #Javascript
Javascript无阻塞加载具体方式
Jun 28 #Javascript
Extjs4 类的定义和扩展实例
Jun 28 #Javascript
You might like
php导出CSV抽象类实例
2014/09/24 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
vuex的使用步骤
2021/01/06 Vue.js
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python selenium循环登陆网站的实现
2019/11/04 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书