首页 新闻 搜索 专区 学院

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>

求大神帮忙看看,代码哪里需要完善或修改,谢谢。

繁华已逝的主页 繁华已逝 | 菜鸟二级 | 园豆:353
提问于:2015-01-22 13:04
< >
分享
所有回答(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>

这是我以前做的可以拖拽的弹出层。你参考下

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2015-01-22 15:23

谢谢你的回复,问群里的人后才知道移动时绑定的对象有问题,后来群内小伙伴把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>

 

支持(0) 反对(0) 繁华已逝 | 园豆:353 (菜鸟二级) | 2015-01-26 13:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册