文化教育微信小程序_jQuery完成的简略拖拽功用示

2021-01-08 13:27| 发布者: | 查看: |

jQuery实现的简单拖拽功能示例【测试可用】       这篇文章主要介绍了jQuery实现的简单拖拽功能,涉及jQuery基于事件响应及页面元素属性动态操作实现拖拽功能的相关操作技巧,需要的朋友可以参考下
meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title 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="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代码运行工具:,可得到如下测试效果:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部