JavaScript实现元素拖拽缩放

dragSize.css

/* css文件 */
.dragSize {
		position: relative;
}
.dragSize .dragSizeItem {
	position: absolute;
}
.dragSize .dragSizeItem-across {
	right: 0px;
	top: 0px;
	width: 5px;
	height: 100%;
	cursor: e-resize;
	/* background-color: red; */
}
.dragSize .dragSizeItem-vertical {
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 5px;
	cursor: s-resize;
	/* background-color: green; */
}
.dragSize .dragSizeItem-slant {
	right: 0px;
	bottom: 0px;
	width: 10px;
	height: 10px;
	cursor: se-resize;
	/* background-color: blue; */
}

dragSize.js

/**
 * 
 * @param {*} el 
 * @param {
	 across   能否横向拖动
	 vertical 能否纵向拖动
	 slant    能否斜向拖动
	 delay    延迟时间
	 position 父元素定位方式
 } options 
 */

// 这里没用Es6的import
function dragSize(el, {
  across = true,
  vertical = true,
  slant = true,
  delay = 20,
  position = 'relative'
} = {}) {
  el.classList.add('dragSize');
  el.style.position = position;

  // 横向
  if (across) {
    addDrag('across');
  }
  // 纵向
  if (vertical) {
    addDrag('vertical');
  }
  // 斜向
  if (slant) {
    addDrag('slant');
  }

  let pos = {
    startX: 0,
    startY: 0,
    startWidth: 0,
    startHeight: 0,
  }

  // 有点闭包的意思了
  function addDrag(direct) {
    // 生成一个拖拽元素
    let dragItem = document.createElement('div');
    dragItem.className = 'dragSizeItem dragSizeItem-' + direct;
    el.append(dragItem);
    // 移动事件
    let moveEvent = throttle((e) => { // 这里节流比防抖好
      if (direct == 'across') {
        el.style.width = pos.startWidth + (e.pageX - pos.startX) + 'px';
      }
      if (direct == 'vertical') {
        el.style.height = pos.startHeight + (e.pageY - pos.startY) + 'px';
      }
      if (direct == 'slant') {
        el.style.width = pos.startWidth + (e.pageX - pos.startX) + 'px';
        el.style.height = pos.startHeight + (e.pageY - pos.startY) + 'px';
      }
    }, delay)
    // 鼠标放下
    dragItem.addEventListener('mousedown', (startEvent) => {
      pos.startX = startEvent.pageX;
      pos.startY = startEvent.pageY;
      pos.startWidth = el.offsetWidth;
      pos.startHeight = el.offsetHeight;
      // 添加移动事件
      document.addEventListener('mousemove', moveEvent);
      // 鼠标抬起
      document.addEventListener('mouseup', (endEvent) => {
        document.removeEventListener('mousemove', moveEvent);
      })
    })
  }
}
// 节流函数
function throttle(cb, time) {
	let lock = false;
	return function(e) {
		if (lock) {
			return;
		}
		//上锁
		lock = true;
		//时间
		cb(e);
		//开锁
		setTimeout(() => {
			lock = false;
		}, time);
	}
}

Lyove