標籤：style blog code java c ext
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>drag-demo</title>
<style type="text/css">
#one{width: 100px;height: 100px;background: #66CCCC;color:#FFFFFF;}
</style>
<script type="text/javascript">
window.onload=function(){
dragone(‘one‘);
};
// 版本一:僅僅只實現拖拽，忽略其他問題
function dragone(domName){
//擷取需要拖到元素的dom對象
var dom = document.getElementById(domName);
//當這個dom元素按下的時候
dom.onmousedown=function(e){
/*
瀏覽器安全色性判斷主要是為了相容ie8，其他的ie7、ie6沒測試，不知道
*/
e = e || window.event;
/*
設定該dom元素為絕對位置absolute
只有設定為position:absolute才能實現left(距離頁面左邊)和top(距離頁面頂部)設定，下面有說明
*/
dom.style.position = ‘absolute‘;
/*
e.clientX:擷取滑鼠按下點的位置在頁面上的X（橫向即水平）值
這裡假如是：e.clientX=10
e.clientY:擷取滑鼠按下點的位置在頁面上的Y（縱向即垂直）值
這裡假如是：e.clientY=20
dom.offsetLeft：擷取該元素距離頁面左邊的距離
這裡假如是：dom.offsetLeft = 5
dom.offsetTop：擷取該元素距離頁面頂部的距離
這裡假如是：dom.offsetTop = 6
這裡如果不理解可以使用畫圖工具進行理解
diffX:即5 = 10 - 5，計算出的5就是滑鼠按下的x點距離該元素內部左邊的值
diffY:即14 = 20 - 6，計算出的14就是滑鼠按下的y點距離該元素內部頂部的值
*/
var diffX = e.clientX-dom.offsetLeft;
var diffY = e.clientY-dom.offsetTop;
//當元素被點下並在介面上移動的時候
document.onmousemove=function(e){
e = e || window.event;//瀏覽器安全色
/*
dom.style.left和dom.style.top即距離頁面左邊、頂部的距離
即用移動後的滑鼠按下x，y值-之前按下點的距離內部左邊、距離頂部的值
得到的值即是移動後的元素距離頁面的x，y的距離，重新賦值一下給dom元素即可
*/
dom.style.left = e.clientX-diffX+‘px‘;//設定移動時left值
dom.style.top = e.clientY-diffY+‘px‘;//設定移動時top值
};
//滑鼠鬆開的時候
document.onmouseup=function(e){
//去除頁面移動、鬆開事件
//去除後該元素下次再次被點擊拖動時，這兩個事件又會被綁定上的，無需擔心
document.onmousemove = null;
document.onmouseup = null;
};
};
}
</script>
</head>
<body>
<div id="one">版本一</div>
</body>
</html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
