原生js实现拖拽移动与缩放效果

效果图如下-实现了简单的拖拽和缩放功能

第一步—简单的拖拽功能

 // 创建一个MoveClass构造函数
    function MoveClass(id, options = {
   }) {
   
        // 绑定ele属性
        this.ele = document.querySelector(id);

        this.move();
    }

// 给MoveClass原型上绑定move方法
    MoveClass.prototype.move = function () {
   
        // ele的鼠标按下事件调用mousedown
        this.ele.onmousedown = e => {
   
            // 获取事件对象
            var e = e || window.event;
            // 鼠标按下时，鼠标相对于元素的x坐标
            var x = e.offsetX;
            // 鼠标按下时，鼠标相对于元素的y坐标
            var y = e.offsetY;
            // 鼠标按下移动时调用mousemove
            document.onmousemove = e => {
   
                // 元素ele移动的距离l
                var l = e.clientX - x;
                // 元素ele移动的距离l
                var t = e.clientY - y;
                this.ele.style.left = l + "px";
                this.ele.style.top = t + "px";
            }
            // 当鼠标弹起时，清空onmousemove与onmouseup
            document.onmouseup = () => {
   
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
    // new一个MoveClass对象
    var moveClass = new MoveClass("#box");

效果如下，简单的拖拽

第二步—简单的缩放功能

1.设置方位

// ele的左，左上，左下，右，右上，右下，上，下
    MoveClass.prototype.editoptions = {
   
        left_top: true,
        left: true,
        right<