jquery方法+js一般方法+js面向对象方法实现拖拽效果
更新时间：2012年08月30日 16:46:31 作者：
多种方法制作的div拖拽，简单实用，包括了jquery方法、js一般方法、js面向对象方法
复制代码 代码如下:
<!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.jb51.net/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>
相关文章
下面小编就为大家带来一篇js 显示日期时间的实例(时间过一秒加1)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家介绍了JS技巧Canvas 性能优化脏矩形渲染实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
虽说jquery支持css选择器，可以把一些css规则放在js里，js无论如何是比css灵活的。但是js修改的是dom的htmlelement的stlye，是一个操作而非规则。2009-06-06
这篇文章主要介绍了Javascript函数式编程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
传统的javascript中只有对象,没有类的概念,下面这篇文章主要给大家介绍了关于ES6 class类实现继承的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
scroll事件实现监控滚动条并分页显示(zepto.js)
这篇文章主要为大家详细介绍了scroll事件实现监控滚动条并分页显示示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
pjblog中的UBBCode.js...2007-04-04
本文主要对javascript中的（Event）事件进行介绍，文章篇尾举了几个案例：方块随着鼠标移动；输入框文字提示；仿select控件；留言本；自定义右键菜单；键盘控制div运动。需要的朋友可以看下2016-12-12
这篇文章主要介绍了JS实现的tab切换选项卡效果,结合具体实例形式分析了JS通过鼠标事件触发自定义函数控制页面元素样式变换实现tab切换功能的相关实现技巧,需要的朋友可以参考下2017-02-02
大家都知道ElementUI是"饿了么"公司推出的基于Vue2.0的组件库，这篇文章主要介绍了axios拦截器、ElementUI组件的使用方法,需要的朋友可以参考下2023-01-01
最新评论