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动态设置鼠标事件示例代码
Oct 30 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
Vue实现多标签选择器
Nov 28 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
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
Java基础知识面试题
2014/03/25 面试题
三年级科学教学反思
2014/01/29 职场文书
股份转让协议书
2014/04/12 职场文书
竞选部长演讲稿
2014/04/26 职场文书
学校评语大全
2014/05/06 职场文书
关于美容院的活动方案
2014/08/14 职场文书
关于环保的活动方案
2014/08/25 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
综治目标管理责任书
2015/05/11 职场文书
2016新年致辞
2015/08/01 职场文书
商场广播稿范文
2015/08/19 职场文书
Python基础之条件语句详解
2021/06/16 Python
什么是SOLID
2022/03/24 Javascript