拖动图片改变位置

案例描述

拖动图片改变位置

点击图片可以复制图片
鼠标移动过程中，会有图片跟随
再次点击图片，图片固定位置。

实现过程

通过过程我们可以分析出，需要三个事件进行绑定即

点击事件：点击后创建（复制）一个新的图片
鼠标跟随：图片跟随鼠标移动而移动
停止：即鼠标再次点击图片固定在当前位置。

代码实现

鼠标点击之前，首先要获取图片对象，不然怎么给图片绑定点击事件呢。这里需要考虑一件事情，即鼠标移动事件在什么时候被触发，很简单，当然是在图片被点击的时候。那么我们就需要一个标志，用于记录是否触发了点击事件。因此第一个事件的代码可以写为：

   //获取图片元素对象
           var img = document.getElementsByClassName('pic')[0]
           //设置开关，并定义克隆的对象。
           var cloneImg,flag = false
           // 为图片对象绑定事件
           img.onclick = function (event){
               flag = true //表示click事件触发了
           // 获取鼠标坐标值html
              var mouseX = event.pageX
           var mouseY = event.pageY
           // 计算复制的图片的坐标值（鼠标减去图片大小的一半）
           var x = mouseX - 80
           var y = mouseY - 46
           // 获取原有图片当前显示的宽度和高度
           // 复制元素,并且显示（鼠标显示在图片的正中心）在页面中
           cloneImg = img.cloneNode()
           document.body.appendChild(cloneImg)
           //改变克隆对象的坐标
           cloneImg.style.left = x + 'px'
           cloneImg.style.top = y + 'px'
           }

那么接下来要做的就是就是为新创建出来的图片对象赋予鼠标移动事件。这里我们需要判断下标志是否为true，即点击事件是否被触发。那么最后一件事就是鼠标再次点击的情况了，这个情况是在鼠标移动事件时才可以被执行的，那么这个事件就应该写在鼠标移动事件里。

// 鼠标跟随移动 - 鼠标跟随事件
   var html = document || document.documentElement //代表当前页面
   html.onmousemove = function (event) {
   if (flag === true) {
   // 获取鼠标坐标值html
   var mouseX = event.pageX
   var mouseY = event.pageY
   // 计算复制的图片的做编制
   var x = mouseX - 80
   var y = mouseY - 46
   cloneImg.style.left = x + 'px'
   cloneImg.style.top = y + 'px'
   cloneImg.onclick = release
   }
   }
   // 释放图片
   function release() {
   flag = false
   }

其他

完整代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <style>
           .pic {
               width: 160px;
               height: 92px;
               border-radius: 10px;
               box-shadow: 0 0 5px 5px #e5e5e5;
               position: absolute;
               left: 100px;
               top: 100px;
           }
       </style>
   </head>
   <body>
       <img class="pic" src="https://cdn.jsdelivr.net/gh/blogimg/[email protected]/2020/04/13/d8ccc2fd66f340c46b8fb98ed7148223.png"/>

       <script>
           //获取图片元素对象
           var img = document.getElementsByClassName('pic')[0]
           //设置开关，并定义克隆的对象。
           var cloneImg,flag = false
           // 为图片对象绑定事件
           img.onclick = function (event){
               flag = true //表示click事件触发了
           // 获取鼠标坐标值html
              var mouseX = event.pageX
           var mouseY = event.pageY
           // 计算复制的图片的坐标值（鼠标减去图片大小的一半）
           var x = mouseX - 80
           var y = mouseY - 46
           // 获取原有图片当前显示的宽度和高度
           // 复制元素,并且显示（鼠标显示在图片的正中心）在页面中
           cloneImg = img.cloneNode()
           document.body.appendChild(cloneImg)
           //改变克隆对象的坐标
           cloneImg.style.left = x + 'px'
           cloneImg.style.top = y + 'px'
           }
   // 鼠标跟随移动 - 鼠标跟随事件
   var html = document || document.documentElement //代表当前页面
   html.onmousemove = function (event) {
   if (flag === true) {
   // 获取鼠标坐标值html
   var mouseX = event.pageX
   var mouseY = event.pageY
   // 计算复制的图片的做编制
   var x = mouseX - 80
   var y = mouseY - 46
   cloneImg.style.left = x + 'px'
   cloneImg.style.top = y + 'px'
   cloneImg.onclick = release
   }
   }
   // 释放图片
   function release() {
   flag = false
   }
       </script>
   </body>
</html>