1、Html 拖动 

 

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>拖动</title>
    <style>
      #range {
        position: relative;
        width: 600px;
        height: 400px;
        margin: 10px;
        background-color: rgb(133, 246, 250);
      }

      .icon {
        position: absolute;
        height: 100px;
        width: 100px;
        cursor: move;
        background-color: #ff9204;
        user-select: none;
      }
    </style>
  </head>
  <body>
    <div id="range">
      <div class="icon">100*100</div>
    </div>
    <script>
      const main = document.getElementById('range');
      const icon = document.querySelector('.icon');
      let move = false;
      let deltaLeft = 0,
        deltaTop = 0;

      // 拖动开始事件，要绑定在被移动元素上
      icon.addEventListener('mousedown', function (e) {
        /*
         * @des deltaLeft 即移动过程中不变的值
         */
        deltaLeft = e.clientX - e.target.offsetLeft;
        deltaTop = e.clientY - e.target.offsetTop;
        move = true;
      });

      // 移动触发事件要放在，区域控制元素上
      main.addEventListener('mousemove', function (e) {
        if (move) {
          const cx = e.clientX;
          const cy = e.clientY;
          /** 相减即可得到相对于父元素移动的位置 */

          let dx = cx - deltaLeft;
          let dy = cy - deltaTop;

          /** 防止超出父元素范围 */
          if (dx < 0) dx = 0;
          if (dy < 0) dy = 0;
          if (dx > 500) dx = 500;
          if (dy > 300) dy = 300;
          icon.setAttribute('style', `left:${dx}px;top:${dy}px`);
        }
      });

      // 拖动结束触发要放在，区域控制元素上
      main.addEventListener('mouseup', function (e) {
        move = false;
        console.log('mouseup');
      });
    </script>
  </body>
</html>

Html 拖动 和 React 拖动_ico

2、React 拖动

import React, { PureComponent } from "react";
import jQuery from "jquery";

export default class dragm extends PureComponent {
  componentDidMount() {
    let move = false;
    let deltaLeft = 0,
      deltaTop = 0;
    const drag2 = document.getElementById("drag2");

    drag2.addEventListener("mousedown", function (e) {
      var left = jQuery("#drag1").position().left;
      var top = jQuery("#drag1").position().top;
      deltaLeft = e.clientX - left;
      deltaTop = e.clientY - top;
      move = true;
    });

    document.addEventListener("mousemove", function (e) {
      if (move) {
        let dx = e.clientX - deltaLeft;
        let dy = e.clientY - deltaTop;
        jQuery("#drag1").css("left", dx);
        jQuery("#drag1").css("top", dy);
      }
    });

    document.addEventListener("mouseup", function (e) {
      move = false;
    });
  }
  render() {
    const { show } = this.props;
    console.log("show", show);
    return (
      <div
        id="drag1"
        style={{
          position: "absolute",
          height: 500,
          width: 500,
          userSelect: "none",
          zIndex: 1,
          border: "solid",
        }}
      >
        <div
          id="drag2"
          style={{
            backgroundColor: "red",
            height: 100,
            cursor: "move",
          }}
        ></div>
        <div
          style={{
            backgroundColor: "blue",
            height: 100,
          }}
        ></div>
      </div>
    );
  }
}