// 創(chuàng)建一個(gè)MoveClass構(gòu)造函數(shù)
 function MoveClass(id, options = {}) {
 // 綁定ele屬性
 this.ele = document.querySelector(id);

 this.move();
}

// 給MoveClass原型上綁定move方法
 MoveClass.prototype.move = function () {
 // ele的鼠標(biāo)按下事件調(diào)用mousedown
 this.ele.onmousedown = e => {
 // 獲取事件對(duì)象
 var e = e || window.event;
 // 鼠標(biāo)按下時(shí)，鼠標(biāo)相對(duì)于元素的x坐標(biāo)
 var x = e.offsetX;
 // 鼠標(biāo)按下時(shí)，鼠標(biāo)相對(duì)于元素的y坐標(biāo)
 var y = e.offsetY;
 // 鼠標(biāo)按下移動(dòng)時(shí)調(diào)用mousemove
 document.onmousemove = e => {
 // 元素ele移動(dòng)的距離l
 var l = e.clientX - x;
 // 元素ele移動(dòng)的距離l
 var t = e.clientY - y;
 this.ele.style.left = l + "px";
 this.ele.style.top = t + "px";
 }
 // 當(dāng)鼠標(biāo)彈起時(shí)，清空onmousemove與onmouseup
 document.onmouseup = () => {
 document.onmousemove = null;
 document.onmouseup = null;
 }
 }
 }
 // new一個(gè)MoveClass對(duì)象
 var moveClass = new MoveClass("#box");

// ele的左，左上，左下，右，右上，右下，上，下
 MoveClass.prototype.editoptions = {
 left_top: true,
 left: true,
 right: true,
 top: true,
 bottom: true,
 right_top: true,
 left_bottom: true,
 right_bottom: true,
 }

// 給原型綁定縮放的方法
 MoveClass.prototype.editEle = function () {
 // console.log(this.ele.clientWidth,this.ele.clientHeight);
 // console.log(this.ele.offsetLeft,this.ele.offsetTop);
 var that = this;
 // 創(chuàng)建一個(gè)div
 var div = document.createElement("div");
 // 遍歷this.editoptions
 for (let attr in this.editoptions) {
 if (this.editoptions[attr]) {
 // 循環(huán)創(chuàng)建左，左上，左下，右，右上，右下，上，下方位的小點(diǎn)
 var dian = document.createElement("div");
 dian.className = "dian " + attr;
 // 設(shè)置類(lèi)型為對(duì)應(yīng)的attr
 dian.dataset.type = attr;
 // 當(dāng)按下對(duì)應(yīng)方位的小點(diǎn)時(shí)
 dian.onmousedown = e => {
 var e = e || window.event;
 // 先獲取鼠標(biāo)距離屏幕的left與top值
 var clientXY = {
 x: e.clientX,
 y: e.clientY
 }
 // 獲取鼠標(biāo)按下時(shí)ele的寬高
 var eleWH = {
 width: this.ele.clientWidth,
 height: this.ele.clientHeight,
 }
 // 阻止事件冒泡（針對(duì)父元素的move）
 e.stopPropagation();
 // 通過(guò)e.target獲取精準(zhǔn)事件源對(duì)應(yīng)的type值
 var type = e.target.dataset.type;
 // 鼠標(biāo)按下對(duì)應(yīng)方位小點(diǎn)移動(dòng)時(shí)，調(diào)用mousemove
 document.onmousemove = function (e) {
 // 查找type中是否包含”right“
 if (type.indexOf('right') > -1) {
 // console.log("right");
 // 如果拖拽后的寬度小于最小寬度，就return出去
 if (that.options.minWidth > eleWH.width + e.clientX - clientXY.x) {
 return;
 }
 // ele拖拽后的寬度為：初始width+拖拽后鼠標(biāo)距離屏幕的距離 - 第一次按下時(shí)鼠標(biāo)距離屏幕的距離
 that.ele.style.width = (eleWH.width + e.clientX - clientXY.x) + "px";
 }
 // 與”right“相同原理
 if (type.indexOf("bottom") > -1) {
 // console.log("bottom");
 if (that.options.minHeight > eleWH.height + e.clientY - clientXY.y) {
 return;
 }
 that.ele.style.height = (eleWH.height + e.clientY - clientXY.y) + "px"
 }

 if (type.indexOf("top") > -1) {
 // console.log("top");
 if (that.options.minHeight > eleWH.height - e.clientY + clientXY.y) {
 return;
 }
 // ele拖拽后的高度為：初始height-拖拽后鼠標(biāo)距離屏幕的距離 + 第一次按下時(shí)鼠標(biāo)距離屏幕的距離
 that.ele.style.height = (eleWH.height - e.clientY + clientXY.y) + "px";
 // 重新設(shè)置ele的top值為此時(shí)鼠標(biāo)距離屏幕的y值
 that.ele.style.top = e.clientY + "px";
 }
 // 與”top“相同原理
 if (type.indexOf("left") > -1) {
 // console.log("left");
 if (that.options.minWidth > eleWH.width - e.clientX + clientXY.x) {
 return;
 }
 that.ele.style.width = (eleWH.width - e.clientX + clientXY.x) + "px";
 // 重新設(shè)置ele的left值為此時(shí)鼠標(biāo)距離屏幕的x值
 that.ele.style.left = e.clientX + "px";
 }
 }
 document.onmouseup = function () {
 document.onmousemove = null;
 document.onmouseup = null;
 }
 }
 }
 // 將類(lèi)名為”dian“的div添加到div中
 div.appendChild(dian);
 }
 // 為div設(shè)置類(lèi)名
 div.className = "kuang"
 // 將類(lèi)名為”kuang“的div添加到ele中
 this.ele.appendChild(div);
 }

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

 #box {
 width: 100px;
 height: 100px;
 background: orange;
 position: absolute;
 left: 100px;
 top: 100px;
 }

 .kuang {
 box-sizing: border-box;
 border: 1px solid #0f0;
 width: 100%;
 height: 100%;
 position: relative;
 }

 .kuang .dian {
 position: absolute;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #0f0;
 }

 .left_top {
 left: -5px;
 top: -5px;
 }

 .right_top {
 right: -5px;
 top: -5px;
 }

 .left_bottom {
 left: -5px;
 bottom: -5px;
 }

 .right_bottom {
 right: -5px;
 bottom: -5px;
 }

 .top {
 top: -5px;
 left: 50%;
 transform: translateX(-50%);
 }

 .bottom {
 bottom: -5px;
 left: 50%;
 transform: translateX(-50%);
 }

 .left {
 left: -5px;
 top: 50%;
 transform: translateY(-50%);
 }

 .right {
 right: -5px;
 top: 50%;
 transform: translateY(-50%);
 }
</style>

<body>
 <div id="box" class="border"></div>
</body>