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 相关文章推荐
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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连接Oracle数据库
2006/10/09 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python字典DICT类型合并详解
2017/08/17 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
单位消防安全制度
2014/01/12 职场文书
给校长的建议书600字
2014/05/15 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android
httpclient调用远程接口的方法
2022/08/14 Java/Android