js div 이동 가능
6216 단어 div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<style>
#id1{position:relative;}
#movediv{
position:absolute;border:1px solid #000;
cursor:pointer;
}
</style>
<script language="javascript" type="text/javascript">
var _IsMousedown = 0;
var _ClickLeft = 0;
var _ClickTop = 0;
function moveInit(divID,evt)
{
_IsMousedown = 1;
if(getBrowserType() == "NSupport"){
return;
}
var obj = getObjById(divID);
if(getBrowserType() == "fox"){
_ClickLeft = evt.pageX - parseInt(obj.style.left);
_ClickTop = evt.pageY - parseInt(obj.style.top);
}else{
_ClickLeft = evt.x - parseInt(obj.style.left);
_ClickTop = evt.y - parseInt(obj.style.top);
}
}
function Move(divID,evt)
{
if(_IsMousedown == 0){
return;
}
var objDiv = getObjById(divID);
if(getBrowserType() == "fox"){
objDiv.style.left = evt.pageX - _ClickLeft;
objDiv.style.top = evt.pageY - _ClickTop;
}
else{
objDiv.style.left = evt.x - _ClickLeft;
objDiv.style.top = evt.y - _ClickTop;
}
}
function stopMove()
{
_IsMousedown = 0;
}
function getObjById(id)
{
return document.getElementById(id);
}
function getBrowserType()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
//alert(browser);
if ((browser=="Netscape")){
return "fox";
}else if(browser=="Microsoft Internet Explorer"){
if(version>=4){
return "ie4+";
}else{
return "ie4-";
}
}else{
return "NSupport";
}
}
</script>
<body>
<div id="id1">
<div id="movediv" style="background-color:blue;left:20px;top:20px;" onmousedown="moveInit('movediv',event);" onmousemove="Move('movediv',event)" onmouseup="stopMove()" onmouseout="stopMove()">12313</div>
<div id="id2" style="background-color:red;width:200px;height:100px;"></div>
</div>
</body>
</html>
두 번 째:
<!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=gb2312" />
<title> </title>
<style type="text/css">
<!--
.drag{position:absolute;width:200px; background-color:green;height:120px;z-index:1;}
.da{width:100%;height:20px;background-color:black;color:white;cursor:move;}
.x{float:right;color:red;cursor:pointer;}
-->
</style>
</head>
<body>
<div class="drag" rel="drag" id="drag1" style="left:30px;top:10px;" onmousedown="dargit(this,event);">
<div class="da" ><span class="x">x</span> 1.</div>
1
</div>
<script type="text/javascript">
var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//
var x, y,rw,rh;
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute("rel")=="drag"){
divs[i].onmousemove=function(){
thismove(this);// ;
}
}
}
function thismove(o){
rw=parseInt(x)-parseInt(o.style.left);
rh=parseInt(y)-parseInt(o.style.top);
document.title=rw+"= ="+rh;
if(rh<=20 && rw>=180)document.title=rw+"||20*20||"+rh;// 20*20
if(rh<=20 && rw<180 )document.title=rw+"|| ||"+rh;// ;
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
lx = e.clientX; ly = e.clientY;
}else{
lx = event.x; ly = event.y;
}
if(document.all) thiso.setCapture();
st(o);//
}
document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(canDrg){
//if(rh<=20 && rw<180 ){//
var ofsx = x - lx;
thiso.style.left = parseInt(thiso.style.left) + ofsx;
lx = x;
var ofsy = y - ly;
thiso.style.top = parseInt(thiso.style.top) + ofsy;
ly = y;
//}else{canDrg=false;}
}
}
document.onmouseup=function(){
canDrg=false;// false
if(document.all && thiso != null){
//ie , ;
thiso.releaseCapture();
thiso = null;
}
}
function set(obj){
obj=obj.parentNode.parentNode;
if(obj.getAttribute("rel"));
//obj.style.zIndex=1;
}
function st(o){
var p = o.parentNode;
if(p.lastChild != o){
p.appendChild(o);
}
if(rh<=20 && rw>=180){
canDrg=false;
// ;
window.status=rw+"|"+rh;
if(p.firstChild == o) return;
p.insertBefore(o, p.firstChild);
}
}
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
🧙🏼 HTML 구조를 나타내는 요소: 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함) : 인라인 컨테이너 : 인라인 레벨 요소 🌵 span (인라인 요소) vs div(블록 요소) ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.