HTML(实现图片位置的拖拽效果)
首先我们要把图片大小用代码写出来
<style> div{ width:80px; height: 80px; background: blue; position: absolute; } </style>
写出鼠标移动事件
<script> var box = document.getElementById('box'); //onmousedown 当鼠标按住box之后,可以拖动元素 box.onmousedown = function(){ var disX = event.clientX - this.offsetLeft; var disY = event.clientY - this.offsetTop; // 复制一个跟box一样的div var clone = this.cloneNode(); clone.removeAttribute('id'); clone.style.opacity = 0.3; document.body.appendChild(clone); document.onmousemove = function(){ clone.style.left = event.clientX - disX + "px"; clone.style.top = event.clientY - disY + "px"; } document.onmouseup = function(){ document.onmousemove = null; box.style.left = clone.style.left; box.style.top = clone.style.top; document.body.removeChild(clone); } } //onmousemove //onmouseup </script>