也许你想成为太阳,可你却只是一颗星辰;也许你想成为大树,可你却是一棵小草。于是,你有些自卑。其实,你和别人一样,也是一片风景:做不了太阳,就做星辰,在自我的星座发光发热;做不了大树,就做小草,以自我的绿色装点期望……
本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考,具体如下:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.haodaima.com jQuery拖拽</title> <style type="text/css"> #box{ position:fixed; left:100px; top:100px; background-color:red; width:300px; height:200px; } #out{ height:2000px; } </style> <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script> <script> $(document).ready(function(){ var drafting=false; var offX,offY,mouseX,mouseY,winX,winY,x,y; $("#box").mousedown(function(event){ event.stopPropagation(); drafting=true; }); $(document).mousemove(function(event){ event.stopPropagation(); var e=event||window.event; mouseX=e.pageX||e.clientX+$(document).scrollLeft(); mouseY=e.pageY||e.clientY+$(document).scrollTop(); winX=$("#box").offset().left-$(document).scrollLeft(); winY=$("#box").offset().top-$(document).scrollTop(); if(drafting==false){ offX=mouseX-winX; offY=mouseY-winY; } x=mouseX-offX; y=mouseY-offY; $("#box").css({'left':x,'top':y}); }); $(document).mouseup(function(event){ event.stopPropagation(); drafting=false; }); }); </script> </head> <body> <div id="box"></div> <div id="out"></div> </body> </html>
这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.haodaima.com/code/HtmlJsRun,可得到如下测试效果:
希望本文所述对大家jQuery程序设计有所帮助。
到此这篇关于jQuery实现的简单拖拽功能示例【测试可用】就介绍到这了。这种创新代表着社会所需要的东西:首创性、 进取心和创造精神。更多相关jQuery实现的简单拖拽功能示例【测试可用】内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!