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 相关文章推荐
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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
PHP 透明水印生成代码
2012/08/27 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
详解Python进程间通信之命名管道
2017/08/28 Python
基于Python os模块常用命令介绍
2017/11/03 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python如何查看网页代码
2020/06/07 Python
Python 随机按键模拟2小时
2020/12/30 Python
Django url 路由匹配过程详解
2021/01/22 Python
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
行政人员岗位职责
2013/12/08 职场文书
校园新闻广播稿
2014/01/10 职场文书
消防安全责任书
2014/04/14 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
摘录式读书笔记
2015/07/01 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python