mouse_javascript 기술로 드래그할 수 있는 DIV 구현 아이디어 및 코드-JS 튜토리얼-php.cn

mouse_javascript 기술로 드래그할 수 있는 DIV 구현 아이디어 및 코드

WBOY

풀어 주다： 2016-05-16 17:19:28

원래의

879명이 탐색했습니다.

复代码代码如下:

测试可动div
<스크립트 언어='javascript' type='text/javascript'> 
var offset_x; 
var offset_y; 
function Milan_StartMove(oEvent) 
{ 
var whichButton; 
if(document.all&&oEvent.button==1) whichButton=true; 
else { if(oEvent.button==0)whichButton=true;} 
if(whichButton) 
{ 
var oDiv=document.getElementById("oDiv"); 
offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); 
offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); 
document.documentElement.onmousemove=function(mEvent) 
{ 
var eEvent; 
if(document.all) eEvent=이벤트; 
else{eEvent=mEvent;} 
var oDiv=document.getElementById("oDiv"); 
var x=eEvent.clientX-offset_x; 
var y=eEvent.clientY-offset_y; 
oDiv.style.left=(x) "px"; 
oDiv.style.top=(y) "px"; 
} 
} 
} 
function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; } 


<본문> 

style="cursor:move;position:absolute;width:100px;height: 60px;border:1px solid 

silver;left:100px;top:100px;z-index:9999;">

document.all[]是文档中所有标签组成成的一个数组变weight,包括了文档对象中所有元素;
event.button적值：0没按键 1按左键 2按右键 3按左와 右键 4按中间键 5按左와 中间键 6按右와 中间键 7按所有键

下면对此代码进行改进，模창문 并且让它可以盖住

复代码代码如下:

을 선택하세요.

<머리>
测试可动div
<스크립트 언어='javascript' type='text/javascript'>
var offset_x;
var offset_y;
function Milan_StartMove(oEvent,div_id)
{
var whichButton;
if(document.all&&oEvent.button==1) whichButton=true;
else { if(oEvent.button==0)whichButton=true;}
if(whichButton)
{
var oDiv=div_id;
offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft);
offset_y=parseInt(oEvent.clientY-oDiv.offsetTop);
document.documentElement.onmousemove=function(mEvent)
{
var eEvent;
if(document.all) eEvent=이벤트;
else{eEvent=mEvent;}
var oDiv=div_id;
var x=eEvent.clientX-offset_x;
var y=eEvent.clientY-offset_y;
oDiv.style.left=(x) "px";
oDiv.style.top=(y) "px";
var d_oDiv=document.getElementById("disable_" oDiv.id);
d_oDiv.style.left=(x) "px";
d_oDiv.style.top=(y) "px";
}
}
}
function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; }
함수 div_Close(o)
{var oDiv=o; oDiv.style.display="none";var d_oDiv=document.getElementById("disable_" o.id);d_oDiv.style.display="none";}

<본문>

style="cursor:move;width:100%;height:15px; 배경색:#0066cc; 글꼴 크기:10px;">

测试一下

이 div에서는 더 많은 것을 사용할 수 없나요?换成parentNode,调整了CSS样式，这样在FF下也能正常运行了。