讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
javascript - 写了个可拖拽的div，为啥点击内部的select，div会往下跳？
PHP中文网
PHP中文网 2017-04-11 10:31:29
[JavaScript讨论组]
0 2 268
举报 



    
    拖动p
    
   



  

        

            

                
                    

                        亚信小谷围-1期-1栋 第一单元
                    

                
                
                    

                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                    

                    

                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                    

                
            

        

        

            

                
                    

                        亚信小谷围-1期-1栋 第二单元
                    

                
                
                    

                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                    

                    

                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                    

                
            

        

        

            

                
                    

                        亚信小谷围-1期-1栋 第三单元
                    

                
                
                    

                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                    

                    

                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                    

                
            

        

        

            

                
                    

                          亚信小谷围-1期-1栋 第四单元
                    

                
                
                    

                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                    

                    

                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
                            

                        		
                        
                            
                            
 均套面积:
                                91.93
                            

                            
 均  价:
                                20,675.61
                            

                            
 金  额:
                                68,921,981.92
PHP中文网
PHP中文网

认证0级讲师

全部回复(2)
PHPz
PHPz2017-04-11 10:33:29 2楼

试试下面的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拖动p</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
      
       /*拖曳*/
.drag{position:fixed;background:#ccc;z-index:999;border:1px solid #cbcbcb;cursor:move;width:200px;}
.tbLast tbody tr .dataTd{cursor:pointer;}
.userMenu .homeBtn{cursor:pointer;background:url('../images/home.png');width:34px;display:inline-block;vertical-align:middle;height:34px;margin-right:10px;margin-top:10px;}
.userMenu .homeBtn:active{cursor:pointer;background:url('../images/home.png');width:34px;display:inline-block;vertical-align:middle;height:34px;margin-right:10px;margin-top:10px;}
.userMenu .homeBtn:hover{cursor:pointer;background:url('../images/homeBtn_on.png');width:34px;display:inline-block;vertical-align:middle;height:34px;margin-right:10px;margin-top:10px;}
.detailTab{background:#fff;width:100%;}
.cha{background:url('../images/cha.png');width:14px;height:14px;display:block;position:absolute;top:3px;cursor:pointer;right:3px;display:inline-block;}
#click{width:400px;display:inline-block;margin-right:-7px;*display:inline;*zoom:1;}
#click{width:100%;overflow-x:auto;white-space:nowrap;}
#click .tzgBox{
    float: left;
}
body{
    position: relative;
    top: 0;
    left: 0;
}
#click #tzg1{
    position: absolute;
    left: 0px;
    top: 0;
}
#click #tzg2{
    position: absolute;
    left: 300px;
    top: 0;
}
#click #tzg3{
    position: absolute;
    left: 600px;
    top: 0;
}
#click #tzg4{
    position: absolute;
    left: 900px;
    top: 0;
}
.tbLast2{width:100%;font-size:12px; background: #fff;}
.tbLast2  th{background:#5a6692;color:#fff;text-align:left;height:34px;line-height: 34px;border-right:1px solid #cbcbcb;font-size:14px;padding-left:8px}
.tbLast2 tbody  td{background-clip:padding-box;/*position:relative;*/color:#484848;text-align:center;padding:6px 3px;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;}
.tbLast2 tbody td:last-child{border-right:0;}
.tbLast2 tbody tr.last td{border-bottom:0;}
.tbLast2 tbody tr.odd td{background:#fff;}
.tbLast2 tbody tr.edd td{background:#f4f8fb;}
.tbLast2 .updatBtn{display:inline-block;background:#f1f3f6;color:#484848;border-style:solid;border-width:1px;border-color:#bfbfbf;border-radius:3px;padding:2px 7px;font-size:12px;cursor:pointer;}
.tbLast2 tbody tr.redRow td{color:#ff0000;font-weight:bold;}
.tbLast2 tbody tr.boldRow td{font-weight:bold;font-size:14px}
.tbLast2 tbody tr td.redTd{color:#ff0000;font-weight:bold;}
.tbLast2 tbody tr td.boldTd{font-weight:bold;color:#484848;}
.tbLast2 tbody tr td.dataTd{text-align:left;padding-left:8px;line-height:2;background-clip:padding-box;}
.tbLast2 tbody tr td.dataTd p{width:190px;min-width: 190px;}
.tbLast2 tbody tr td.redTd{background-clip:padding-box;}
.tbLast2 tbody tr td.dataTd span{color:red;}
.tbLast2 tbody tr td{background-clip:padding-box;}
.tbLast2 tbody tr.odd td,.tbLast tbody tr.edd td{background-clip:padding-box;}
/*田字格*/
.tbLast2 tbody .dataTdNew{text-align:left;border:1px solid #cbcbcb;cursor:pointer;}
.tbLast2 tbody .dataTdNew p em{width:58px;display:inline-block;text-align:right;}
.tbLast2 tbody .dataTdNew p i{font-style:normal;color:#ff5b5b;font-family:'arial';}
.tbLast2 tbody .dataTdNew p .i1{color:#00a2ff;}
.uploadimg{background:url('../images/upload.png') no-repeat;display:inline-block;width:28px;height:28px;vertical-align:middle;cursor:pointer;float:right;margin-top:3px;margin-right:10px;}
.uploadimg:hover{background:url('../images/upload_on.png') no-repeat;display:inline-block;width:28px;height:28px;vertical-align:middle;}
.uploadimg1{background:url('../images/upload1.png') no-repeat;display:inline-block;width:28px;height:28px;vertical-align:middle;cursor:pointer;float:right;margin-right:10px;margin-top:3px;}
.uploadimg1:hover{background:url('../images/upload1_on.png') no-repeat;display:inline-block;width:28px;height:28px;vertical-align:middle;}

    </style>
   <script type="text/javascript">
    //拖动p
    window.onload = function(){
        function dragp1(s){
        var drags=document.getElementById(s);
    
    drags.onmousedown=function(e){
        e=e||window.event;            //区分IE浏览器
        var xx=e.layerX|| e.offsetX;  //相对当前坐标系的border左上角开始的坐标
        var yy=e.layerY|| e.offsetY;

       /* var dw=document.body.clientWidth;
        var dh=document.body.clientHeight;*/

        //设置捕获范围 //兼容浏览器
      /*  if(drags.setCapture){
            drags.setCapture();
        }else if(window.captureEvents){
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
        }*/

        document.onmousemove =function(e){
          if(e.srcElement.nodeName != "SELECT") {
            var ev=e||window.event;

            var x=ev.pageX||ev.clientX; //相对整个页面的坐标
            var y=ev.pageY||ev.clientY;
            var tx=x-xx;
            var ty=y-yy;

            var bw= window.innerWidth-drags.offsetWidth;
            var bh= window.innerHeight-drags.offsetHeight;

            if(drags.offsetLeft>=0 && drags.offsetLeft<= bw && drags.offsetTop>=0 && drags.offsetTop<=bh){
                drags.style.left=tx+"px";
                drags.style.top=ty+"px";
            }
            if(drags.offsetLeft<0){
                drags.style.left=0+"px";
            }
            if(drags.offsetLeft>bw){
                drags.style.left=bw+"px";
            }
            if(drags.offsetTop<0){
                drags.style.top=0+"px";
            }
            if(drags.offsetTop>bh){
                drags.style.top=bh+"px";
            }
            return false;
          }
        }
       
        document.onmouseup=function(){
            //取消捕获范围   //兼容浏览器
          /*  if(drags.releaseCapture){
                drags.releaseCapture();
            }else if(window.captureEvents){
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
            }*/
            //清除事件
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
        }
        dragp1("tzg1");   
        dragp1("tzg2");
        dragp1("tzg3");
        dragp1("tzg4");

}
      


</script>

</head>
<body>
  <p id="click">
        <p id="tzg1" class="tzgBox" onclick="none">
            <table class="tbLast2">
                <thead>
                    <tr>
                        <th colspan="2"><a class="uploadimg" onclick="ImgBrow.show('../images/housePic.png');"></a>亚信小谷围-1期-1栋 第一单元</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="odd">
                        <td class="dataTdNew dragtd">
                            <select style="width:58px display:none">
                                <option>01</option>
                                 <option>02</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                    </tr>
                    <tr class="edd">
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
        <p id="tzg2" class="tzgBox">
            <table class="tbLast2">
                <thead>
                    <tr>
                        <th colspan="2"><a class="uploadimg1"></a>亚信小谷围-1期-1栋 第二单元</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="odd">
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                    </tr>
                    <tr class="edd">
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
        <p id="tzg3" class="tzgBox">
            <table class="tbLast2">
                <thead>
                    <tr>
                        <th colspan="2"><a class="uploadimg1"></a>亚信小谷围-1期-1栋 第三单元</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="odd">
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                    </tr>
                    <tr class="edd">
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
        <p id="tzg4" class="tzgBox">
            <table class="tbLast2">
                <thead>
                    <tr>
                        <th colspan="2">  <a class="uploadimg1"></a>亚信小谷围-1期-1栋 第四单元</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="odd">
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                    </tr>
                    <tr class="edd">
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                        <td class="dataTdNew dragtd">
                            <select style="width:58px">
                                <option>01</option>
                            </select>
                            <p><em> 均套面积:</em>
                                <i class="i1">91.93</i>
                            </p>
                            <p><em> 均&nbsp;&nbsp;价:</em>
                                <i>20,675.61</i>
                            </p>
                            <p><em> 金&nbsp;&nbsp;额:</em>
                                <i>68,921,981.92</i>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
    </p>

</body>
</html>
赞 +0
添加回复
迷茫
迷茫2017-04-11 10:33:29 1楼

仅以题意猜测，鼠标定位没有跟p定位相匹配。

p的定位是相对于左上角的。

赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部