美文网首页
原生JS实现拖拽缩放元素

原生JS实现拖拽缩放元素

作者: 如果俞天阳会飞 | 来源:发表于2021-10-18 15:38 被阅读0次
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>原生JS实现拖拽缩放元素</title>
  <style>
    #div1 {

      width: 11px;
      height: 11px;
      background-color: #000;
      position: absolute;
      bottom: 0;
      right: 0;
      cursor: nw-resize;
    }

    #div2 {
      width: 200px;
      height: 150px;
      background: #CCC;
      position: relative;
    }
  </style>
  <script>
    window.onload = function () {

      var oDiv = document.getElementById('div1');
      var oDiv2 = document.getElementById('div2');

      oDiv.onmousedown = function (ev) {

        var oEvent = ev || event;

        var disX = oEvent.clientX - oDiv.offsetLeft;
        var disY = oEvent.clientY - oDiv.offsetTop;

        document.onmousemove = function (ev) {

          var oEvent = ev || event;
          //要加上子DIV的大小(oDiv.offsetWidth与oDiv.offsetHeight)
          oDiv2.style.width = oEvent.clientX - disX + oDiv.offsetWidth + 'px';
          oDiv2.style.height = oEvent.clientY - disY + oDiv.offsetHeight + 'px';
        };

        document.onmouseup = function () {

          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    };
  </script>
</head>

<body>
<div id="div2">
  <div id="div1"></div>
</div>
</body>

</html>

相关文章

  • 原生JS实现拖拽缩放元素

  • js拖拽html元素工具类

    复制就能用的拖拽js方法 原生js实现拖拽元素方法 使用(注意拖拽目标元素需绝对定位 position: 'abs...

  • 实现拖拽

    原生js实现 HTML5原生实现:拖拽draggable属性、DataTranfers对象

  • HTML5实现拖拽

    实现拖拽效果源元素 - 要拖拽的文件目标元素 - 要拖拽到哪里去 目前实现拖拽效果使用原生DOM就能实现 - 最麻...

  • 原生js实现元素的拖拽

    demo地址 要点1:css 必须设置position要点2:鼠标事件的应用要点3:鼠标弹起,事件清空

  • Drag Drop---API

    在h4标准中,我们定义个拖拽事件是很麻烦的,用原生的js来实现拖拽的效果。我们需要计算拖拽的元素的坐标位置和距离之...

  • js实现元素拖拽

    被移动元素必须为绝对定位 Dom Javasrtipt

  • 原生js实现拖拽

    onmousedown,onmousemove,onmouseup 先看js代码.static定位:positio...

  • HTML5拖拽drag

    通过拖拽实现页面元素的位置改变 实现拖拽效果 源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 目前实现拖拽...

  • 原生js实现可拖拽功能

    原生js实现一个可全局拖拽的按钮功能,直接上代码*js部分 *html部分 *css部分

网友评论

      本文标题:原生JS实现拖拽缩放元素

      本文链接:https://www.haomeiwen.com/subject/dkjnoltx.html