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>

　　推荐阅读

　　javascript动态加载三

之前两篇都介绍了，通过动态加载JS文件或者说JS模块，是怎么一步一步实现。首先是通过同步策略来实现模块加载与回调函数之间进行分离，接着是通过异步策略来实现模块加载与回调函数之间进行分离。这一篇，主要是>>>详细阅读

本文标题：jquery方法+js一般方法+js面向对象方法实现拖拽效果

地址：http://www.17bianji.com/kaifa2/JS/23123.html

1/2 1