溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS實現的簡單拖拽功能。分享給大家供大家參考，具體如下：
1、實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js實現拖拽</title>
<style>
#water{
width:400px;
height:188px;
background-color: #ff6600;
}
#water:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="water"></div>
<script>
dragInit("water");//調用
//拖拽初始化
function dragInit(id){
var $div = document.getElementById(id);
var style = {
position: "absolute",
left: "0",
top: "0"
}
for(var k in style){
$div.style[k] = style[k];//設置關鍵css
}
$div.onmousedown = function(e){//鼠標按鍵按下
e = e || window.event;
var x = e.clientX - $div.offsetLeft;//鼠標到左上角的距離信息, 固定不變
var y = e.clientY - $div.offsetTop;
document.onmousemove = function(e){//鼠標移動
e = e || window.event;
var L = e.clientX - x;
var T = e.clientY - y;
var pW = document.documentElement.clientWidth;//頁面寬度
var pH = document.documentElement.clientHeight;
var divW = $div.offsetWidth;//Dom寬度
var divH = $div.offsetHeight;
// 范圍限定
if(L < 0){
L = 0;
}
if(T < 0){
T = 0;
}
if(L > pW - divW){
L = pW - divW;
}
if(T > pH - divH){
T = pH - divH;
}
// 范圍限定 end
$div.style.left = L + "px";
$div.style.top = T + "px";
};
document.onmouseup = function(e){//鼠標按鍵松開
document.onmousemove = null;
};
};
}
</script>
</body>
</html>
2、運行效果圖如下：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
