jquery方法+js一般方法+js面向对象方法实现拖拽效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery方法+js一般方法+js面向对象方法实现拖拽效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2391字，纯文字阅读大概需要4分钟。
内容图文
代码如下:
<!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>
内容总结
以上是互联网集市为您收集整理的jquery方法+js一般方法+js面向对象方法实现拖拽效果全部内容，希望文章能够帮你解决jquery方法+js一般方法+js面向对象方法实现拖拽效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】