极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖动div</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 div{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 div em{width:58px;display:inline-block;text-align:right;}
.tbLast2 tbody .dataTdNew div i{font-style:normal;color:#ff5b5b;font-family:'arial';}
.tbLast2 tbody .dataTdNew div .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">
//拖动div
window.onload = function(){
function dragDiv1(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){
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;
}
}
}
dragDiv1("tzg1");
dragDiv1("tzg2");
dragDiv1("tzg3");
dragDiv1("tzg4");
}
</script>
</head>
<body>
<div id="click">
<div 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>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
<tr class="edd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div 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>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
<tr class="edd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div 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>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
<tr class="edd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div 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>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
<tr class="edd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>写了个可拖拽的div，为啥点击内部的select，div会往下跳？
html5阅读 3k
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}10 回答11.1k 阅读
为什么在谷歌浏览器中 'a' == ['a'] 返回 true？
'a' == ['a'] 谷歌浏览器返回了true 是为什么16 回答3k 阅读
vue项目如何在初始化之前跳转外部页面？
vue项目内有一个分享功能，但是这个分享出去的页面打开会非常慢，所以就想到了单独写了一套H5页面专门用于手机端打开，然后在这个vue项目的分享页面初始化函数里面加一个判断终端是否为移动端，如果是就再做一次跳转，到这个单独的H5页面上去，这样就不会去加载vue框架，打开速度会更快。以上是初始方案和预期。5 回答4.8k 阅读✓ 已解决
js如何控制移动端overflow:scroll容器滑动的最大速度？
{代码...} demo在这：[链接]在移动端滑动一下这个.box区域,稍微一用力就到头了，如果我想用js去控制他滑动的最大速度该怎么去处理？4 回答3.1k 阅读✓ 已解决
前端代码更新如何通知用户刷新页面？
前端代码更新如何通知用户刷新页面？2 回答2.6k 阅读✓ 已解决
纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？
纯css绘制倒过来的等腰梯形的样式。而且可以把梯形的背景色调整为无色。可以接受复杂代码（比如布局复杂，单个div单个css样式是无法完成，需要多个div搭配多个样式），但是至少满足以下要求（1）可以调整边框的颜色大小粗细等，（2）可以调整边框内外阴影（3）梯形里面还能放文字3 回答5.1k 阅读✓ 已解决
css布局怎么保证右边一直在可视范围内？
如下：灰色和红色的高度都不确定，怎么保证左边高度太高需要滚动时右边一直能在可视范围内？ {代码...}5 回答1.9k 阅读
试试下面的代码