实现拖放层的JS代码

最新推荐文章于 2024-09-12 19:13:21 发布

eft21

最新推荐文章于 2024-09-12 19:13:21 发布

阅读量620

点赞数

分类专栏：ｗｅｂ　　ｊａｖａ文章标签： function html javascript border ie class

ｗｅｂ　　ｊａｖａ专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>New Document</title>
  <style>
.drag{
width: 100px; height: 300px; border: 1px solid blue;
font:12px verdana;
position: absolute;
}
</style>
  <script language="javascript" type="text/javascript">
<!--
var ie=document.all
var ns6=document.getElementById&&!document.all

var dragapproved=false
var z,x,y

function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}

function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"

while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.οnmοusemοve=move
return false
}
}
document.οnmοusedοwn=drags
document.οnmοuseup=new Function("dragapproved=false")

//-->
</script>
</head>

<body>
  <div class="drag">
   <font color="green">hello world</font>
  </div>
</body>
</html>