使用Drag随意拖拽图片到页面的任意处，并兼容移动端

最新推荐文章于 2024-03-12 16:36:04 发布

执笔看墨花开

最新推荐文章于 2024-03-12 16:36:04 发布

阅读量6.3k

点赞数 1

分类专栏： html5 JavaScript

本文链接：https://blog.youkuaiyun.com/qq_31201781/article/details/80815730

版权

JavaScript 同时被 2 个专栏收录

22 篇文章

订阅专栏

html5

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
    maximum-scale=1, user-scalable=no">
    <link rel="icon" href="https://xlzy520.cn/icons/lo.ico">
    <title>跳舞小萝莉随意drag到任意处</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        #dance {
            cursor: pointer;
        }
    </style>
</head>
<body ondrop="drop(event)" ondragover="allowDrop(event)" ontouchmove="drop(event)">
<div class="main">
    <img style="position: absolute;left: 0;top: 0;"
    src="https://xlzy520.cn/images/2.gif" 
    draggable="true" id="dance"
    ondragstart="drag(event)" ontouchstart="drag(event)">
</div>
<script>
  (function () {
    document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px'
    document.getElementsByTagName('body')[0].style.width = window.innerWidth + 'px'
  })()
  let dance = document.getElementById('dance')
  let dragOffset={
    X1:null,
    Y1:null
  }

  function drag(e) {
    if (e.type === 'dragstart') {  //根据e.type判断是PC端还是移动端
      e = event ? event : e
    }else {
      if (event.touches) {
        e = event.touches[0] ? event.touches[0]:event;
      }
    }
    dragOffset.X1 = e.clientX - parseInt(dance.style.left)
    dragOffset.Y1 = e.clientY - parseInt(dance.style.top)
    // 鼠标点击的位置在整个页面上的坐标是（e.clientX，e.clientY）
    // 鼠标点击的位置在图片的位置坐标为（X1，Y1）
  }

  function drop(e) {
    if (e.type === 'drop'){
      e = event ? event : e
      e.preventDefault()
    } else {
      if (event.touches) {
        e = event.touches[0] ? event.touches[0]:event;
      }
    }
    dance.style.left = e.clientX - dragOffset.X1 + 'px'
    dance.style.top = e.clientY - dragOffset.Y1 + 'px'
    // 根据鼠标点击的位置在整个页面上的坐标和在图片上的坐标来确定整个图片的坐标
  }


  function allowDrop(e) {
    e = event ? event : e
    // 移动过程中触发
  }

  document.ondragover = function () {
    //取消事件的默认行为
    return false;
  }
  document.ondrop = function () {
    //取消事件的默认行为
    return false
  }
</script>

</body>
</html>