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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
js正确获取元素样式详解
Aug 07 Javascript
最短的IE判断代码
Mar 13 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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实现Mysql读写分离
2013/06/28 PHP
超级退弹代码
2008/07/07 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python简单实现刷新智联简历
2016/03/30 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
十佳大学生事迹材料
2014/01/29 职场文书
教研活动总结
2014/04/28 职场文书
老公给老婆的保证书
2014/04/28 职场文书
公务员政审个人总结
2015/02/12 职场文书
医院志愿者活动总结
2015/05/06 职场文书
贷款收入证明格式
2015/06/24 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技