juqery拖拽卡掉问题
0
[待解决问题]
自己写了一个拖拽的效果，正常速度拖拽的话还行，现在就是：如果快速拖拽的话，拖拽的div会被卡掉。不知道怎么解决，源码如下：
<!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=utf-8" /> <title>快速拖拽时会卡掉</title> <script type="text/javascript" src="http://www.yilingsj.com/zxsc/lbtx/jquery-1.8.3.min.js"></script> <style type="text/css"> .tz{position:absolute;left:500px;top:100px;z-index:100;width:300px;height:300px;cursor:move; background:#ccc;} </style> </head> <body> <h2>问题描述：快速拖拽时会卡掉，求解决。</h2> <div class="tz"></div> <script> $(function(){ /*定义拖拽*/ function drag(){ $('.tz').on('mousedown',function(e){ e.preventDefault(); e.returnValue=false; x1=e.pageX; y1=e.pageY; ol=$(this).position().left; ot=$(this).position().top; $(this).on("mousemove",function(e){ e.preventDefault(); e.returnValue=false; x2=e.pageX; y2=e.pageY; x=x2-x1; y=y2-y1; $(this).css({left:(ol+x)+"px",top:(ot+y)+"px"}); }); }); $('.tz').on('mouseup mouseleave',function(){$(this).off("mousemove");}); $('.tz').click(function(){return false;}); }; drag(); }); </script> </body> </html>
求大神帮忙看看，代码哪里需要完善或修改，谢谢。
所有回答(1)
0
<style type="text/css"> .ybg{ background-color:#CCC; z-index:10; opacity:0.5; position:absolute; left:0px; top:0px; width:100%; height:1000px; display:none;} .div{ position:absolute; left:200px; top:50px; display:none; background-color:#fff; border:2px solid #0C6; width:300px; height:250px; z-index:99;} h3{ background-color:#06C;color:#FFF; margin:0px; cursor:move;} a{ margin-left:150px; color:#FFF;} </style>
<input type="button" value="弹出" /><br /> <div class="ybg" style=" background-color:#CCC; z-index:10; opacity:0.5; position:absolute; left:0px; top:0px; width:100%; height:1000px; display:none;"></div> <div class="div"> <h3 style="background-color:#06C;color:#FFF; margin:0px; cursor:move;">信息窗口<a href="#" style="margin-left:150px; color:#FFF;">[关闭]</a></h3> <div class="content" style="position:absolute; left:200px; top:50px; display:none; background-color:#fff; border:2px solid #0C6; width:300px; height:250px; z-index:99;"> 内容 </div> </div>
<script type="text/javascript"> <!-- 这里是弹出浮层 --> $(function(){ $(":button").click(function(){ $(".ybg").css({"display":"block","height":$(document).height()}); $(".div").show(); $(this).hide(); }); $("h3").mousedown(function(event){ var ismove=true; var x=event.pageX-$(this).offset().left; var y=event.pageY-$(this).offset().top; $(document).mousemove(function(event){ if(ismove){ $(".div").css({"left":event.pageX-x,"top":event.pageY-y}); } }).mouseup(function(){ ismove=false; }); }); $("a").click(function(){ $(".ybg,.div").hide(); $(":button").show(); }); }); </script>
这是我以前做的可以拖拽的弹出层。你参考下
谢谢你的回复，问群里的人后才知道移动时绑定的对象有问题，后来群内小伙伴把jquery做了下修改。
<!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=utf-8" /> <title>拖拽(猛拖会卡掉)</title> <script type="text/javascript" src="http://www.yilingsj.com/zxsc/lbtx/jquery-1.8.3.min.js"></script> <style type="text/css"> .tz{position:absolute;left:500px;top:100px;z-index:100;width:300px;height:300px;cursor:move; background:#ccc;} </style> </head> <body> <div class="tz"></div> <style> html {height: 100%;} body {min-height:100%;} /*这里的css定义页面至少整个窗口高。*/ </style> <script> $(function() { /*定义拖拽*/ function drag() { var e_data, //存放mousedown的一些数据（坐标） e_mark; //鼠标是否按下 $(document).on('mousemove', function(e) { if (!e_mark) { return } e.preventDefault(); e.returnValue = false; x2 = e.pageX; y2 = e.pageY; x = x2 - e_data.x1; y = y2 - e_data.y1; $('.tz').css({ left: (e_data.ol + x) + "px", top: (e_data.ot + y) + "px" }); }) /*拖拽*/ $('.tz').on('mousedown', function(e) { e.preventDefault(); e.returnValue = false; x1 = e.pageX; y1 = e.pageY; ol = $(this).position().left; ot = $(this).position().top; e_mark = 1; e_data = {x1: x1, y1: y1, ol: ol, ot: ot}; }); $('.tz').on('mouseup', function() { e_mark = 0; }); $('.tz').click(function() { return false; }); }; drag(); }); </script> </body> </html>
