div 레이어 드래그 일반 이해하기 쉬운 버전
16131 단어 div
<html>
<style id="css">
body{font-family:Verdana;font-size:11px;color:#333;}
#win{position:absolute;left:100px;top:100px;width:200px;height:150px;border:1px solid #000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor:hand;}
</style>
<script>
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
// ;
function startDrag(evt){
var dragObj=document.getElementById("win");
var evt = (evt) ? evt : ((window.event) ? window.event : "")
document.getElementById("title").setCapture();
var win = dragObj;
x0 = evt.clientX;
y0 = evt.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
// ;
function drag(evt){
if(moveable){
var evt = (evt) ? evt : ((window.event) ? window.event : "")
var dragObj=document.getElementById("win");
var win = dragObj;
document.getElementById("content").innerHTML= evt.clientX;
win.style.left = x1 + evt.clientX - x0;
win.style.top = y1 + evt.clientY - y0;
}
}
// ;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>
<body>
, , . !
<div id="win">
<div class="title" id="title" onmousedown="startDrag(event)" onmouseup="stopDrag(this)" onmousemove="drag(event)"> 1</div>
<div id="content">
.<br>
, .<br>
</div>
</div>
</body>
</html> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
🧙🏼 HTML 구조를 나타내는 요소: 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함) : 인라인 컨테이너 : 인라인 레벨 요소 🌵 span (인라인 요소) vs div(블록 요소) ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
