1.步骤分析:
1.1 获取id
1.2 当鼠标点击时执行的js
1.3当鼠标移动时执行的js
1.4当鼠标放开时执行的js
2.代码实现
<!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> #div1 { position: absolute; width: 100px; height: 100px; border-radius: 50%; background-image: url('1.png'); } </style> <script> window.onload = function() { // 获取div var oDiv = document.getElementById('div1'); // 当鼠标点击时执行的js oDiv.onmousedown = function() { // 拖拽对象的大小(dis) = 鼠标的坐标(event.client) - div的坐标(oDiv.offset) var disX = event.clientX - oDiv.offsetLeft; var disY = event.clientY - oDiv.offsetTop; // 当鼠标移动时执行的js document.onmousemove = function() { // 拖拽对象的坐标 = 鼠标的坐标(event.client) - 拖拽对象的大小(dis) oDiv.style.left = event.clientX - disX + 'px'; oDiv.style.top = event.clientY - disY + 'px'; }; // 当鼠标放开时执行的js document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; } }; }; </script> </head> <body> <div id="div1"></div> </body> </html>
3.核心代码
3.1 拖拽对象的大小(dis) = 鼠标的坐标(event.client) - div的坐标(oDiv.offset)
var disX = event.clientX - oDiv.offsetLeft; var disY = event.clientY - oDiv.offsetTop;
3.2拖拽对象的坐标 = 鼠标的坐标(event.client) - 拖拽对象的大小(dis)
oDiv.style.left = event.clientX - disX + 'px';
oDiv.style.top = event.clientY - disY + 'px';