jquery方法+js一般方法+js面向对象方法实现拖拽效果


Posted in Javascript onAugust 30, 2012
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
<title>拖拽</title> 
<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery.js"></script> 
<style type="text/css"> 
*{margin: 0;padding: 0;} 
#drag{background: #ccc;height: 200px;width: 300px;text-align: center;line-height: 200px;position: absolute;left: 20px;top: 20px;} 
</style> 
<body> 
<div id="drag"> 
我可以拖动哦!! 
</div> 
<script type="text/javascript"> 
//jquery方法拖拽 
/**$(function(){ 
var move = false; //判断是否被移动 
var a = 0; 
var b = 0; 
$("#drag").mousedown(function(event){ 
move = true; 
a = event.pageX - parseInt($("#drag").css("left")); 
b = event.pageY - parseInt($("#drag").css("top")); 
}) 
$(document).mousemove(function(event){ 
if(move){ 
var x = event.pageX - a; 
var y = event.pageY - b; 
$("#drag").css({left: x,top: y}) 
} 
}).mouseup(function(){ 
move = false; 
}) 
})**/ 
//简单的js一般方法 
/**var drag = document.getElementById("drag"); 
var a = 0; 
var b = 0; 
drag.onmousedown = function(event){ 
var event = event||window.event; 
a = event.clientX-drag.offsetLeft; 
b = event.clientY-drag.offsetTop; 
drag.onmousemove = function(event){ 
var event = event||window.event; 
var x = event.clientX - a; 
var y = event.clientY - b; 
drag.style.left = x + "px"; 
drag.style.top = y + "px"; 
} 
document.onmouseup=function(){ 
drag.onmousemove = null; 
drag.onmouseup = null; 
} 
}**/ 
//js面向对象方法 
function Drag(obj){ 
this.drag = document.getElementById(obj); 
//alert(obj); 
this.a = 0; 
this.b = 0; 
var that = this; 
this.drag.onmousedown = function(event){ 
that.mousedown(event); 
} 
} 
Drag.prototype.mousedown = function(event){ 
var event = event||window.event; 
this.a = event.clientX-this.drag.offsetLeft; 
this.b = event.clientY-this.drag.offsetTop; 
var that = this; 
document.onmousemove=function(event){ 
that.mousemove(event) 
} 
document.onmouseup=function(){ 
that.mouseup() 
} 
} 
Drag.prototype.mousemove = function(event){ 
var event = event||window.event; 
var x = event.clientX - this.a; 
var y = event.clientY - this.b; 
this.drag.style.left = x + "px"; 
this.drag.style.top = y + "px"; 
} 
Drag.prototype.mouseup=function(){ 
document.onmousemove = null; 
document.onmouseup = null; 
} 
new Drag("drag"); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
canvas时钟效果
Feb 16 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
原生js实现3D轮播图
Mar 21 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
JS跨域代码片段
Aug 30 #Javascript
JS跨域总结
Aug 30 #Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 #Javascript
xml转json的js代码
Aug 28 #Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 #Javascript
javascript 判断中文字符长度的函数代码
Aug 27 #Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 #Javascript
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
浅析php单例模式
2014/11/25 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
在centos7中分布式部署pyspider
2017/05/03 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python实现淘宝秒杀脚本
2020/06/23 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
什么是Web Service?
2012/07/25 面试题
七一党建活动方案
2014/01/28 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL