標籤：char back etl 滑鼠 對象 doctype nbsp charset meta
<!DOCTYPE html><html><head> <meta charset="utf8"> <title>js拖拽效果</title> <style type="text/css"> #div1 { width : 200px; height: 200px; position: absolute; background: #99dd33; cursor: move; } </style></head><body> <div id="div1"></div></body><script type="text/javascript"> window.onload = function() { var disX = disY = 0; // 滑鼠距離div的左距離和上距離 var div1 = document.getElementById("div1"); // 得到div1對象 // 滑鼠按下div1時 div1.onmousedown = function(e) { var evnt = e || event; // 得到滑鼠事件 disX = evnt.clientX - div1.offsetLeft; // 滑鼠橫座標 - div1的left disY = evnt.clientY - div1.offsetTop; // 滑鼠縱座標 - div1的top // 滑鼠移動時 document.onmousemove = function(e) { var evnt = e || event; var x = evnt.clientX - disX; var y = evnt.clientY - disY; var window_width = document.documentElement.clientWidth - div1.offsetWidth; var window_height = document.documentElement.clientHeight - div1.offsetHeight; x = ( x < 0 ) ? 0 : x; // 當div1到視窗最左邊時 x = ( x > window_width ) ? window_width : x; // 當div1到視窗最右邊時 y = ( y < 0 ) ? 0 : y; // 當div1到視窗最上邊時 y = ( y > window_height ) ? window_height : y; // 當div1到視窗最下邊時 div1.style.left = x + "px"; div1.style.top = y + "px"; }; // 滑鼠抬起時 document.onmouseup = function() { document.onmousemove =null; document.onmouup = null; }; return false; }; };</script></html>
Js 拖動效果
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
