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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
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实现Ftp用户的在线管理的代码
2007/03/06 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP时间函数使用详解
2019/03/21 PHP
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python 多线程Threading初学教程
2017/08/22 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
简约控的天堂:The Undone
2016/12/21 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
厕所文明标语
2014/06/11 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
师德师风自查总结
2014/10/14 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
python使用pymysql模块操作MySQL
2021/06/16 Python