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

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用jquery实现div拖拽的问题

2016-07-05 16:15:17 1838 1

自己闲着无聊就用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
相关问答

1

回答

jquery ajax的问题。?报错

2020-06-22 19:55:43 278浏览量 回答数 1

1

回答

jQuery中ajax请求数据时候json格式报错 ?报错

2020-06-23 00:36:38 370浏览量 回答数 1

1

回答

springmvc+jquery+ajax 报错 Unexpected token <?报错

2020-06-14 17:56:22 413浏览量 回答数 1

1

回答

求助php ajax jquery城市联动获取select的ID遇到的问题?:报错 

2020-06-08 16:38:43 400浏览量 回答数 1

1

回答

【求助】 jQuery的AJAX提交问题:报错

2020-06-07 09:00:58 595浏览量 回答数 1

1

回答

jquery ajax 后台返回值 到前台不会处理了

2016-07-12 15:20:52 1805浏览量 回答数 1

1

回答

Jquery Ajax如何传递JSON数据到controller

2016-02-25 11:33:50 2037浏览量 回答数 1

1

回答

S2SH中jquery(ajax)问题

2016-02-20 10:21:32 1822浏览量 回答数 1

1

回答

jQuery ajax jsonp方式取后台的json数组报错,什么原因?

2016-02-19 15:02:20 2231浏览量 回答数 1

1

回答

关于 jquery实现Ajax 但是没有效果

2016-02-17 21:55:35 2420浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载