javascript
JS原生---鼠标拖拽
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
<!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"> ?
<head runat="server"> ?
??? <title></title> ?
??? <script type="text/javascript"> ?
??????? var mouseX, mouseY; ?
??????? var objX, objY; ?
??????? var isDowm = false;? //是否按下鼠標(biāo) ?
??????? function mouseDown(obj, e) { ?
??????????? obj.style.cursor = "move"; ?
??????????? objX = div1.style.left; ?
??????????? objY = div1.style.top; ?
??????????? mouseX = e.clientX; ?
??????????? mouseY = e.clientY; ?
??????????? isDowm = true; ?
??????? } ?
??????? function mouseMove(e) { ?
??????????? var div = document.getElementById("div1"); ?
??????????? var x = e.clientX; ?
??????????? var y = e.clientY; ?
??????????? if (isDowm) { ?
??????????????? div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px"; ?
??????????????? div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px"; ?
??????????????? document.getElementById("span1").innerHTML = "x:" + div.style.top + "? " + "y:" + div.style.left; ?
??????????? } ?
??????? } ?
??????? function mouseUp(e) { ?
??????????? if (isDowm) { ?
??????????????? var x = e.clientX; ?
??????????????? var y = e.clientY; ?
??????????????? var div = document.getElementById("div1"); ?
??????????????? div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px"; ?
??????????????? div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px"; ?
??????????????? document.getElementById("span2").innerHTML = "x:" + div.style.top + "? " + "y:" + div.style.left; ?
??????????????? mouseX = x; ?
??????????????? rewmouseY = y; ?
??????????????? div1.style.cursor = "default"; ?
??????????????? isDowm = false; ?
??????????? } ?
??????? } ?
??? </script> ?
</head> ?
<body> ?
??? <span id="span1"></span></br><span id="span2"></span></br> ?
??? <div id="div1" style="background-color: Green; border: 1px solid red; height: 300px; ?
??????? top: 100px; left: 100px; width: 300px; position: absolute;" οnmοusedοwn="mouseDown(this,event)" ?
??????? οnmοusemοve="mouseMove(event)" οnmοuseup="mouseUp(event)"> ?
??? </div> ?
</body> ?
</html>
轉(zhuǎn)載于:https://my.oschina.net/fuckBAT/blog/325807
總結(jié)
以上是生活随笔為你收集整理的JS原生---鼠标拖拽的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IPv6地址居然不够用？（特殊情况）怎么
- 下一篇： SpringMVC _Controlle