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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
js中的this关键字详解
Sep 25 Javascript
ajax与302响应代码测试
Oct 23 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
全面了解JavaScript的作用域链
Apr 03 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
详解js异步文件加载器
2016/01/24 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
js select常用操作控制代码
2010/03/16 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
人事专员岗位职责
2015/02/03 职场文书
远程教育学习心得体会
2016/01/23 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python