jquery写拖拽

来源：互联网发布：windows 安装程序编辑：程序博客网时间：2024/06/14 16:45

<span style="font-size:12px;">详情参考:</span><span style="color: rgb(51, 51, 51); font-family: tahoma, arial, 宋体; line-height: 45px; white-space: nowrap; background-color: rgb(238, 238, 241);"><span style="font-size:10px;">妙味课堂原创JavaScript视频教程——事件详解3</span></span>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery-2.1.4.js"></script><script>$(function(){var disX=0;var disY=0;$('div').mousedown(function(ev){disX=ev.pageX-$(this).offset().left;disY=ev.pageY-$(this).offset().top;$(document).mousemove(function(ev){var l=ev.pageX-disX;var t=ev.pageY-disY;if(l<0){l=0;}else if (l>$(window).width()-$('div').get(0).offsetWidth) {l=$(window).width()-$('div').get(0).offsetWidth;};if (t<0) {t=0;}else if(t>$(window).height()-$('div').get(0).offsetHeight){t=$(window).height()-$('div').get(0).offsetHeight;}$('div').css('left',l);$('div').css('top',t);})$(document).mouseup(function(){$(document).off();})return false;//阻止默认事件和默认行为})});</script><style>.box{width: 100px;height: 100px;background: red;position: absolute;}</style></head><body><div class="box"></div></body></html>

0 0