![]()
![]()
View Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>drag div demo</title>
<style type="text/css">
<!--
#dragDiv {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 40px;
top: 51px;
background-color: #3300CC;
cursor:pointer;
}
-->
</style>
<script type="text/javascript">
function addEvent(obj,name,handler,useCapture) //封裝好的註冊事件函數
{
if(window.event)
{
obj.attachEvent('on' + name,handler);
}
else
{
obj.addEventListener(name,handler,useCapture);
}
}
var dragable = false; //當前是否拖動的開關
var mousePosition = []; //鼠標位置緩存
/*
* mousedown事件處理函數。當mousedown事件觸發時，將dragable開關設置爲true，並且讀取鼠標位置存入mousePosition數組。
*/
function mousedownEventHandler(evt)
{
dragable = true;
var evt = evt || event;
var mouseX = (document.body.scrollLeft || document.documentElement.scrollLeft) + evt.clientX;
var mouseY = (document.body.scrollTop || document.documentElement.scrollTop) + evt.clientY;
mousePosition = [mouseX,mouseY];
}
/*
* mousemove事件處理函數。當mousemove事件觸發時，讀取鼠標當前位置和鼠標位置混存比較，然後將差值增加到div的座標中，達到移動div的效果。
*/
function mousemoveEventHandler(evt)
{
if(!dragable) //如果dragable爲false，則不執行拖動
{
return;
}
var evt = evt || event;
var mouseX = (document.body.scrollLeft || document.documentElement.scrollLeft) + evt.clientX;
var mouseY = (document.body.scrollTop || document.documentElement.scrollTop) + evt.clientY;
div.style.left = div.offsetLeft + mouseX - mousePosition[0] + 'px';
div.style.top = div.offsetTop + mouseY - mousePosition[1] + 'px';
mousePosition = [mouseX,mouseY]; //每一次拖動完成後，更新鼠標位置緩存
}
/*
* mouseup事件處理函數。當mouseup事件觸發時，將dragable開關設置爲false,停止拖動。
*/
function mouseupEventHandler()
{
dragable = false;
}
function init() //初始化程序
{
div = document.getElementById('dragDiv');
addEvent(div,'mousedown',mousedownEventHandler,false);
addEvent(document,'mousemove',mousemoveEventHandler,false);
addEvent(div,'mouseup',mouseupEventHandler,false);
}
window.onload = init; //在窗體加載完成時初始化程序
</script>
</head>
<body>
<div id="dragDiv"></div>
</body>
</html>
View Code