js6
作者:互联网
方块拖拽
首先鼠标拖拽要用到三大事件
onmousedown:鼠标选择元素
onmousemove:鼠标移动元素
onmouseup:释放元素,也就是先用鼠标点击元素,然后拖拽元素到某一位置,释放元素的过程
var div1=document.getElementById('div1') div1.onmousedown=function (event){ var chaX=event.clientX-div1.offsetLeft var chaY=event.clientY-div1.offsetTop document.onmousemove=function(event) { div1.style.left=event.clientX-chaX+'px' div1.style.top=event.clientY-chaY+'px'}} document.onmouseup=function(){ document.onmousemove=null } }
用鼠标移动纸条
< html > < head > < title > 用鼠标移动纸条 </ title > < script language = " JavaScript " > <!-- var blnCanMove = false ; var osX = 0 ; var osY = 0 ; function startMove() { if(blnCanMove) { event.srcElement.style.left = event.clientX - osX; event.srcElement.style.top = event.clientY - osY; mvPage.innerHTML = "(" + event.clientX + "," + event.clientY + ")"; } else { event.returnValue = false; } } function stopMove() { if(blnCanMove) { blnCanMove = false; event.returnValue = false; } } function initMoveInfo() { if(event.button == 1) { //如果是按下了鼠标左键 osX = event.offsetX; osY = event.offsetY; blnCanMove = true; event.srcElement.style.zIndex += 1; } else { blnCanMove = false; } event.returnValue = false; } // --> </ script > </ head > < body > < div id = " mvPage " style = " position: absolute; left: 10px; top: 10px; height: 100px; width: 200px; background-image: url('./number/0.gif'); " onm ousedown = " initMoveInfo(); " onm ousemove = " startMove(); " onm ouseup = " stopMove(); " > </ div > < br >< br >< br > < div id = " mvPage1 " style = " position: absolute; left: 10px; top: 10px; height: 100px; width: 200px; background: springgreen; " onm ousedown = " initMoveInfo(); " onm ousemove = " startMove(); " onm ouseup = " stopMove(); " > </ div > </ body > </ html >
方块拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> body{ margin: 0; } #div1{ width: 100px; height: 100px; background: red; /*border-radius: 50%;*/ position: absolute; left: 0; top: 0; } #div2{ width: 100px; height: 100px; background: yellow; /*border-radius: 50%;*/ position: absolute; left: 500px; top: 200px; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html> <script> var div1=document.getElementById('div1') div1.onmousedown=function (event){ var chaX=event.clientX-div1.offsetLeft var chaY=event.clientY-div1.offsetTop document.onmousemove=function(event) { div1.style.left=event.clientX-chaX+'px' div1.style.top=event.clientY-chaY+'px' if (div1.offsetLeft>=div2.offsetLeft-div2.offsetWidth&& div1.offsetTop>=div2.offsetTop-div2.offsetWidth&& div1.offsetLeft<=div2.offsetLeft+div2.offsetWidth&& div1.offsetTop<=div2.offsetTop+div2.offsetWidth) { div2.style.background='blue' }else{ div2.style.background='yellow' } } document.onmouseup=function(){ document.onmousemove=null } } </script>
标签:style,top,100px,js6,onmousemove,event,div1 来源: https://www.cnblogs.com/fedrgd/p/15645832.html