<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>拖拽效果</title> <style> *{ margin: 0; padding: 0; } #div1{ position: absolute; width: 100px; height: 100px; background-color: pink; left: 50px; top: 100px; } </style> </head> <body> <div id="div1"></div> </ Body > < Script > var DIV1 = document.querySelector ( " # DIV1 " ) // var div1.onmousedown = function (E) { var ETO = e.pageY - div1.offsetTop // mouse distance from the top of the box var ELE = e.pageX - div1.offsetLeft // mouse position from the left cassette document.onmousemove = function (E) { div1.style.left = e.pageX - it + ' px ' div1.style.top = e.pageY - eto + ' px ' } } div1.onmouseup=function(){ document.onmousemove=null } </script> </html>
Drag mode frame (2)
Guess you like
Origin www.cnblogs.com/yueranran/p/12176969.html
Recommended
Ranking