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


Posted in Javascript onJune 21, 2013

最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数。
jquery代码:fun.js

jQuery.fn.myDrag=function(){ 
_IsMove = 0; 
_MouseLeft = 0; 
_MouseTop = 0; 
return $(this).bind("mousemove",function(e){ 
if(_IsMove==1){ 
$(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); 
} 
}).bind("mousedown",function(e){ 
_IsMove=1; 
var offset =$(this).offset(); 
_MouseLeft = e.pageX - offset.left; 
_MouseTop = e.pageY - offset.top; 
}).bind("mouseup",function(){ 
_IsMove=0; 
}).bind("mouseout",function(){ 
_IsMove=0; 
}); 
}

html代码:
<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; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$("#myDiv").myDrag(); 
$("#myDiv2").myDrag(); 
}) 
</script> 
</head> 
<body> 
<div id="myDiv" class="myDiv">拖拽1</div> 
<div id="myDiv2" class="myDiv">拖拽2</div> 
</body> 
</html>

效果图1:
jquery实现简单的拖拽效果实例兼容所有主流浏览器 
效果图2:
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Javascript 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JavaScript类的继承操作实例总结
Dec 20 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 #Javascript
js写一个字符串转成驼峰的实例
Jun 21 #Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 #Javascript
JS获得URL超链接的参数值实例代码
Jun 21 #Javascript
随窗体滑动的小插件sticky源码
Jun 21 #Javascript
jquery中文乱码的多种解决方法
Jun 21 #Javascript
js单向链表的具体实现实例
Jun 21 #Javascript
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
python打开网页和暂停实例
2014/09/30 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python星号*与**用法分析
2018/02/02 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python自动发送邮件脚本
2018/06/20 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python二进制文件的转译详解
2019/07/03 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
Java的基础面试题附答案
2016/01/10 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
水务局局长岗位职责
2013/11/28 职场文书
社区志愿者心得体会
2014/01/03 职场文书
初中作文评语大全
2014/04/23 职场文书
男女朋友协议书
2014/04/23 职场文书
镇创先争优活动总结
2014/08/28 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL