js實現拖拽拉伸DIV右側邊框
阿新 • • 發佈：2019-01-01
頁面程式碼
<body> <div style="width: 100%; height: 100%;position: relative;"> <div id="nav" style="background-color: red; width: 300px;height: 100%;display: inline-block;float:left"> </div> <div id="cnt" style="background-color: blue; height: 100%;display: inline-block;float:left"> </div> </div> </body>
js定義拉伸繫結事件函式：
// 右側寬度可調整 /** opt引數： * onmousemove: 為必須引數，需定義寬度控制元件寬度調整的程式碼 * regionWidth: 滑鼠點選的響應寬度範圍（px），可不傳 * onmouseup: 滑鼠up事件回撥程式碼 * isCatch: 是否捕獲回撥函式的異常，預設true */ $.fn.onEastDrag = function (opt) { $(this).bind('mousedown', function (downEvent) { var isMoving = false; if (opt.isCatch == undefined || opt.isCatch == null) opt.isCatch = true; var _thisEl = $(this);//獲取到控制元件 var elPosLeft = _thisEl.offset ().left;// 左側邊界位置 var startPos = downEvent.pageX;// 滑鼠起始位置 var startTime = new Date().getTime(); var oriWidth = _thisEl.width(); var _parentEl = _thisEl.parent(); // 右側邊界位置 var elPosRight = elPosLeft + oriWidth; var regionWidth = opt.regionWidth && opt.regionWidth > 0 ? opt.regionWidth : 6;// 點選響應區域，預設6px寬度 if (elPosRight - regionWidth <= startPos && startPos <= elPosRight) { isMoving = true; //如果在右側邊緣偏左6px內.允許移動 _parentEl.append('<div id="move-mask-laver" style="position:fixed;width: 100%;height: 100%;z-index: 9999;opacity: 0;top: 0px;cursor: col-resize;"></div>'); window.onmousemove = function (moveEvent) { //如果在範圍內 if (isMoving) { //獲取移動的寬度 var move = moveEvent.pageX - startPos; var ev = { oriWidth: oriWidth,// 控制元件最初的寬度 startTime: startTime,// mousedown時間 moveDistance: move,// 移動的距離（與最初位置相比） downEvent: downEvent,// mousedown事件 moveEvent: moveEvent,// 當前move事件 } try { opt.onmousemove(_thisEl, ev);// 寬度設定由呼叫者決定 } catch (e) { if (opt.isCatch) console.warn(e); else throw e; } } //最後返回false; return false; }; //滑鼠鬆開清空所有事件 window.onmouseup = function (upEvent) { window.onmousemove = null; window.onmouseup = null; isMoving = false; _parentEl.find('#move-mask-laver').remove(); if (opt.onmouseup) { try { opt.onmouseup(_thisEl, upEvent); } catch (e) { if (opt.isCatch) console.warn(e); else throw e; } } }; return false; } return true; }); }
呼叫函式：
$(function(){ autoCntWidth(); }); function autoCntWidth() { $('#cnt').width($('#cnt').parent().width() - $('#nav').width() - 5); } $('#nav').onEastDrag({ onmousemove: function(el,event){ el.width(event.oriWidth + event.moveDistance); autoCntWidth(); }, regionWidth: 10, });