標籤：sem round down etl js基礎 body 相容性 sele 添加
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; background-color: red; position: absolute; } </style></head><body>
<div></div>
<script> //擷取需要拖拽的元素 var divs = document.querySelector(‘div‘); //元素的滑鼠落下事件 divs.onmousedown = function(ev){ //event的相容性 var ev = ev||event; //擷取滑鼠按下的座標 var x1 = ev.clientX; var y1 = ev.clientY; //擷取元素的left，top值 var l = divs.offsetLeft; var t = divs.offsetTop; //給可視地區添加滑鼠的移動事件 document.onmousemove = function(ev){ //event的相容性 var ev = ev||event; //擷取滑鼠移動時的座標 var x2 = ev.clientX; var y2 = ev.clientY; //計算出滑鼠的移動距離 var x = x2-x1; var y = y2-y1; //移動的數值與元素的left，top相加，得出元素的移動的距離 var lt = y+t; var ls = x+l; //更改元素的left，top值 divs.style.top = lt+‘px‘; divs.style.left = ls+‘px‘; } //清除 document.onmouseup = function(ev){ document.onmousemove = null; } }</script></body></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
