拖拽案例

作者: 王远清orz | 来源:发表于2019-11-19 14:07 被阅读0次

拖拽案例
拖拽案例
拖拽案例
JS基础学习:图片跟着鼠标飞（最终）/案例复习/拖拽对话框/滚动
案例：鼠标拖拽
案例-鼠标拖拽
【前端案例】15 - 案例：模态框拖拽
JS——事件详情（拖拽案例：onmousedown、onmous
Flutter 拖拽组件案例实现
vue 实现拖拽案例 uniapp

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
            background-color: white;

            /* 不让文字被选中 */
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            cursor: move;
        }

        #box_close {
            float: right;
            cursor: pointer;
        }
    </style>
<body>
  <div class="nav">
    <a href="javascript:;" id="register">注册信息</a>
  </div>
  <div class="d-box" id="d_box">
    <div class="hd" id="drop">注册信息 (可以拖拽)
      <span id="box_close">【关闭】</span>
    </div>
    <div class="bd"></div>
  </div>
  <script>
    var drop = my$('drop');
    var box = my$('d_box');
    var boxClose = my$('box_close');

    drop.onmousedown = function (e) {
      e = e || window.event;
      // 获取鼠标在盒子中的位置  = 鼠标在页面中的位置 - 盒子在页面中的位置

      //获取鼠标在页面中的位置
      // console.log(e.pageX, e.pageY);
      // 获取盒子在页面中的位置

      // var x = e.pageX - box.offsetLeft;
      var x = getPage(e).pageX - box.offsetLeft;
      // var y = e.pageY - box.offsetTop;
      var y = getPage(e).pageY - box.offsetTop;

      
      // 鼠标在文档中移动
      document.onmousemove = function (e) {
        e = e || window.event; 
        //当鼠标在页面中移动时，求盒子坐标

        // 盒子的坐标 = 鼠标在页面中的位置 - 鼠标在盒子中的位置
        var boxX = getPage(e).pageX - x;
        var boxY = getPage(e).pageY - y;

        box.style.left = boxX + 'px';
        box.style.top = boxY + 'px';
      } 
    }

    // 当鼠标弹起，移除事件
    document.onmouseup = function () {
      document.onmousemove = null;
    }

    // 点击关闭，隐藏盒子
    boxClose.onclick = function () {
      box.style.display = 'none';
    }
  </script>
</body>