当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现简单移动端鼠标拖拽

JS实现简单移动端鼠标拖拽

2020年07月23日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了js实现移动端鼠标拖拽的具体代码，供大家参考，具体内容如下

<!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>document</title>
  <style>
    #div {
      width: 100%;
      height: 200px;
      background: rosybrown;
    }
    #button {
      position: absolute;
    }
  </style>

</head>

<body>
  <div id="div">
    <button id="button">看我的魔法屌不屌</button>
  </div>
  <script>
    var button = document.getelementbyid('button')
    button.ontouchstart = function(e) {
      var startx = e.touches[0].clientx - this.offsetleft;
      var starty = e.touches[0].clienty - this.offsettop;
      this.ontouchmove = function(e) {
        button.style.left = e.touches[0].clientx - startx + 'px';
        button.style.top = e.touches[0].clienty - starty + 'px';        
      }
    }
    button.ontouchend = function() {
      button.ontouchmove = null;
    }
  </script>
</body>

</html>

更多精彩文章请点击专题： javascript拖拽特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网