2020-12-12

最新推荐文章于 2024-06-26 21:49:41 发布

零度碳酸-

最新推荐文章于 2024-06-26 21:49:41 发布

阅读量64

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_41086056/article/details/111071414

版权

小栗子

- 移动端拖拽
- pc端拖拽

移动端拖拽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    width: 100px;
    height: 100px;
    background: #c33;
    position: absolute;
    left: 0;
    top: 0;
  }
</style>
<body>
  <div></div>
  <script>
    // 1.触摸元素 touchstart:  获取手指初始坐标，同时获得盒子原来的位置
    // 2.移动手指 touchmove:  计算手指的滑动距离,并且移动盒子
    // 3.离开手指 touchend
    let div = document.querySelector('div');
    let startX = 0 //获取手指初始坐标
    let startY = 0
    let x = 0 //获取盒子原来的位置
    let y = 0;

    div.addEventListener('touchstart',function(e){
      
      // 获取手指初始坐标
      startX = e.targetTouches[0].pageX;
      startY = e.targetTouches[0].pageY;
      x = this.offsetLeft;
      y = this.offsetTop
    })

    div.addEventListener('touchmove',function(e){
      // 计算手指的移动距离，手指移动之后的坐标减去手指初始的坐标
      let moveX = e.targetTouches[0].pageX - startX;
      let moveY = e.targetTouches[0].pageY - startY;
      // 移动我们的盒子   盒子原来的位置 + 手指移动的距离
      this.style.left = x + moveX + 'px'
      this.style.top = y + moveY + 'px'
      e.preventDefault();   //阻止屏幕滚动的默认行为
    })
  </script>
</body>
</html>

pc端拖拽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 312px;
    height: 280px;
    border: 1px solid #ebebeb;
    box-shadow: 0px 0px 20px #ddd;
    background-color: #ddd;
  }
  #title {
    width: 100%;
    height: 40px;
    background-color: aqua;
  }
  span {
    width: 100px;
    height: 100px;
    background-color: #c33;
    position: absolute;
    left: 0;
  }
</style>
<body>
  <div class="dialog">
    <h2 id="title">一些内容</h2>
    <input type="text">
    <hr/>
  <script>

let span = document.querySelector('span')
let button = document.querySelector('button')
console.log(span.offsetLeft,'obj.offsetLeft');

button.addEventListener('click',function(){
  animate(span,500)
})

let title = document.getElementById('title');
    let dialog = document.getElementsByClassName('dialog');
    title.addEventListener('mousedown', function(e){
      console.log(dialog);
      let x = e.pageX - dialog[0].offsetLeft;
      let y = e.pageY - dialog[0].offsetTop;
      document.addEventListener('mousemove',move)
      function move(e){
        dialog[0].style.left = e.pageX - x +'px';
        dialog[0].style.top = e.pageY - x +'px';
    }
    
    document.addEventListener('mouseup',function(e){
     document.removeEventListener('mousemove',move)
    })
    })

  </script>
</body>
</html>

零度碳酸-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-12

小栗子移动端拖拽pc端拖拽移动端拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style>
复制链接

扫一扫