使用jquery实现div拖拽的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

使用jquery实现div拖拽的问题

a123456678 2016-07-05 16:15:17 1461

自己闲着无聊就用jquery写的DIV拖拽效果,先不说容器问题,在拖拽过程总DIV的移动就不是很流畅,.mouseout()方法也没法使用,代码如下:

<!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 src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function(){
                            var _x,_y;
                            var mouseState = false;                         
                        $("#foltdiv").mousedown(function(event){
                            var _top = $("#foltdiv").css('top');
                            var _left = $("#foltdiv").css('left');
                            _top = _top.replace(/\p\x/g,"");
                            _left = _left.replace(/\p\x/g,"");
                             _x = event.pageX-_top;
                             _y = event.pageY-_left;
                             if(mouseState){mouseState=false;
                             $("#foltdiv").fadeTo(0, 1);}
                             else{mouseState = true;
                             $("#foltdiv").fadeTo(0, 0.5);};
                              
                                                     }) 
                        $(document).mouseover(function(event){
                            if(mouseState){
                                var css_top = event.pageX-_x;
                                var css_left = event.pageY-_y;
                                $("#foltdiv").css({top:css_top+"px",left:css_left+"px"})
                                 
                                }
                            })
                      })
</script>
<style>
    .foltdiv{
        background:#009;
        position:absolute;
        width:100px;
        height:100px;
        top:0px;
        left:0px;}
</style>
</head>
 
<body>
<div style="width:600px; height:600px; background:#FF0;" > 
<div class="foltdiv" id="foltdiv">
</div>
</div>
</body>
</html>
云服务器登录 云服务器设置
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:51:35

    不要对拖动对象本身监听鼠标事件,这样会使得你监听事件无法准确定位。
    解决方法:可以把鼠标监听对象放在他的上级对象,或者是直接监听body。

    不要拖动元素本身,如果你不确定拖动对象有多少内容的情况下,不要对对象进行操作,这样难免会卡。
    解决方法:按照你的拖动对象,生成一个新的和对象同等大小空文本元素,对其拖动,在放开鼠标事件触发后,你拖动的对象定位到新生成的对象目标位置

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题