用javascript拖动DIV层

最新推荐文章于 2024-08-07 10:55:23 发布

原创最新推荐文章于 2024-08-07 10:55:23 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何利用JavaScript编写代码实现通过鼠标拖动DIV层来移动窗口的功能，包含样式设置、事件监听和逻辑处理。


<html>
<head>
<title>用javascript拖动DIV层</title>
<style>
body{font-family:Verdana;font-size:11px;color:#333;}
#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor: move;} 
 </style>
 </head>
<body> 
<script>
var move=false; 
function StartDrag(obj)                       
{
 if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
 {
  obj.setCapture();
  obj.style.background="#999";
  move=true;
 } 
}function Drag(obj)                   
{
 if(move)
 {
  var oldwin=obj.parentNode;
  oldwin.style.left=event.clientX-100;
  oldwin.style.top=event.clientY-10;
 }
}function StopDrag(obj)
{
  obj.style.background="#000";
  obj.releaseCapture();
  move=false;
} 
</script> 
<div id="win1">
<div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>
This is a moveable window.<br>
Moreinfo in 
</div>
</body> 
</html>