JS拖拽的進(jìn)一步練習(xí)，移動與拉伸實現(xiàn)代碼_javascript技巧

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 21:03:18

JS拖拽的進(jìn)一步練習(xí)，移動與拉伸實現(xiàn)代碼_javascript技巧

JS拖拽的進(jìn)一步練習(xí)，移動與拉伸實現(xiàn)代碼_javascript技巧:直接在本地是支持IE6的，有個問題就是，鼠標(biāo)點擊的時候光標(biāo)會變?yōu)檫x擇文字的光標(biāo)，不知道應(yīng)該怎么處理這個問題呢？在此記錄一下代碼：簡單拖拽擴展 *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; hei

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀JS拖拽的進(jìn)一步練習(xí)，移動與拉伸實現(xiàn)代碼_javascript技巧:直接在本地是支持IE6的，有個問題就是，鼠標(biāo)點擊的時候光標(biāo)會變?yōu)檫x擇文字的光標(biāo)，不知道應(yīng)該怎么處理這個問題呢？在此記錄一下代碼：簡單拖拽擴展 *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; hei

直接在本地是支持IE6的，有個問題就是，鼠標(biāo)點擊的時候光標(biāo)會變?yōu)檫x擇文字的光標(biāo)，不知道應(yīng)該怎么處理這個問題呢？
在此記錄一下代碼：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>簡單拖拽擴展</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
#outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } 
.controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; color:#fff; border: 1px solid #333;} 
.controlBar{cursor: move;} 
.controlBar h2{ font-size:12px; text-align: center; line-height: 25px; background: blue;} 
.innerCon{text-align: left; line-height: 20px;} 
.innerCon p{ padding: 10px; color: #000;} 
.resize{ position: absolute; height: 10px; width:10px; color: white; z-index: 10; background: red;} 
.lt{left:0;right:0; cursor:nw-resize;} 
.tr{right:0;top: 0;cursor:ne-resize;} 
.rb{right:0;bottom: 0; cursor:nw-resize;} 
.bl{left:0;bottom:0;cursor:ne-resize;} 
</style> 
</head> 
<body> 
 
 
 
 
 
 
 
<h2>按此處拖動</h2> 
 
 
<p>中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間 
內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容 
中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容中間內(nèi)容</p> 
 
 
 
<script type="text/javascript"> 
(function () { 
//定義便捷函數(shù)getElementById,getElementsByTagName,getElementsByClassName,bindFunction,bindEvent 
function $() { 
var elements = new Array(); 
for (var i = 0; i < arguments.length; i++) { 
var element = arguments[i]; 
if (typeof element == 'string') { 
element = document.getElementById(element); 
} 
if (!element) { 
continue; 
} 
if (arguments.length == 1) { 
return element; 
} 
elements.push(element); 
} 
return elements; 
} 
function $$(tag, parent) { 
parent = parent || document; 
return $(parent).getElementsByTagName(tag); 
} 
function $$$(str, parent, tag) { 
if (parent) { 
parent = $(parent); 
} else { 
parent = document; 
} 
tag = tag || '*'; 
var els = parent.getElementsByTagName(tag), 
arr = []; 
for (var i = 0, n = els.length; i < n; i++) { 
for (var j = 0, k = els[i].className.split(' '), l = k.length; j < l; j++) { 
if (k[j] == str) { 
arr.push(els[i]); 
break; 
} 
} 
} 
return arr; 
} 
function bindFunction(obj, func) { 
return function () { 
return func.apply(obj, arguments); 
}; 
} 
function bindEvent(element, type, func) { 
if (element.addEventListener) { 
element.addEventListener(type, func, false); //false 表示冒泡 
} else if (element.attachEvent) { 
element.attachEvent('on' + type, func); 
} else { 
element['on' + type] = func; 
} 
} 
/*定義拖拽類*/ 
var DragBox = function (options) { 
var outWarpId = this.outWarpId = options.outWarpId;//獲取最外圍的包裹層ID 
var outWarp = $(outWarpId);//獲取外圍包裹層對象 
var controlBox = this.controlBox = $$$('controlBox', outWarp, 'div')[0]; //被拖動的層 
this.controlBar = $$$('controlBar', controlBox, 'div')[0]; 
this.resizeLt = $$$('lt', controlBox, 'div')[0]; 
this.resizeTr = $$$('tr', controlBox, 'div')[0]; 
this.resizeRb = $$$('rb', controlBox, 'div')[0]; 
this.resizeBl = $$$('bl', controlBox, 'div')[0]; 
/*獲取outWarpId信息*/ 
this.warpWidth = outWarp.offsetWidth - 2; // 對象寬度 
this.warpHeight = outWarp.offsetHeight - 2; // 對象高度 
this.warpLeft = outWarp.offsetLeft; //對象靠LEFT距離 
this.warpTop = outWarp.offsetTop; //對象靠TOP距離 
/*定義拖動的對象*/ 
this.draging = null; 
this.bind(); 
}; 
DragBox.prototype = { 
moveBox:function (event) { 
event = event || window.event; 
var target = event.target || event.srcElement; 
// 記錄滾動條位置 
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
this.scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 
//記錄光標(biāo)的位置 
var mousex = event.clientX; // 光標(biāo)LEFT 
var mousey = event.clientY; //光標(biāo)TOP 
//console.log('mousex:' + mousex); 
//console.log('mousey:' + mousey);

// 光標(biāo)相對outwarp層的坐標(biāo) 
var posx = mousex + this.scrollLeft - this.warpLeft; 
var posy = mousey + this.scrollTop - this.warpTop; 
// 多次用到this.controlBox 賦值一個短變量名 
var my = this.controlBox; 
// 多次用到this.controlBox.style，賦值一個短變量名 
var myStyle = my.style; 
// 最小尺寸 
var minWidth = 200,minHeight = 200; 
switch(event.type){ 
case 'mousedown': 
/*記錄相關(guān)初始信息*/ 
if(target.parentNode.className.indexOf('controlBar')!=-1){ 
this.draging = this.controlBox; //賦值拖動對象 
} 
if(target.className.indexOf('rb')!= -1){ 
this.draging = this.resizeRb; // 賦值為右下角拖動 
} 
if(target.className.indexOf('tr')!= -1){ 
this.draging = this.resizeTr; // 賦值為右上角改變大小 
} 
if(target.className.indexOf('lt')!= -1){ 
this.draging = this.resizeLt; // 賦值為左上角改變大小 
} 
if(target.className.indexOf('bl') != -1){ 
this.draging = this.resizeBl; 
}

//alert('this.scrollTop:'+this.scrollTop); 
//點擊時記錄拖動層的初始信息 
this.controlBoxWidth = my.offsetWidth; //拖動層的寬度 
this.controlBoxHeight = my.offsetHeight; //拖動層的寬度 
this.controlBoxLeft = my.offsetLeft; //拖動層的LEFT坐標(biāo) 
this.controlBoxTop = my.offsetTop; //拖動層的TOP坐標(biāo) 
// 記錄鼠標(biāo)按下時鼠標(biāo)相對與拖動層的距離 
this.mx = posx - this.controlBoxLeft; 
this.my = posy - this.controlBoxTop; 
// 記錄左下角的坐標(biāo)，因為按住右上拖動的時候左下角不動 
this.lb_x = my.offsetWidth + my.offsetLeft; 
this.lb_y = my.offsetHeight + my.offsetTop; 
console.log('my.offsetHeight:'+my.offsetHeight+'my.offsetTop:'+my.offsetTop); 
// 記錄右下角坐標(biāo)，按住左上角拖動的時候右下角不動 
this.rb_x = my.offsetLeft + my.offsetWidth; 
this.rb_y = my.offsetTop + my.offsetHeight; 
// 記錄右上角坐標(biāo)，當(dāng)按住左下角的時候右上角不動 
this.lt_x = my.offsetLeft + my.offsetWidth; 
this.lt_y = my.offsetTop; 
break; 
case 'mousemove': 
if (this.draging == this.controlBox){ 
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消頁面上由于鼠標(biāo)按下拖動造成的選中文字和圖片的選擇狀態(tài) 
//拖動層的位置 
var left = posx - this.mx; 
var top = posy - this.my; 
left < 0 && (left = 0); 
top < 0 && (top = 0); 
left > (this.warpWidth - this.controlBoxWidth) && (left = this.warpWidth - this.controlBoxWidth); 
top > (this.warpHeight - this.controlBoxHeight) && (top = this.warpHeight - this.controlBoxHeight); 
//改變位置 
myStyle.left = left + 'px'; 
myStyle.top = top + 'px'; 
//右下角拖動 
} else if (this.draging == this.resizeRb) { 
// 需要改變的寬度 
var changeWidth = posx - this.controlBoxWidth - this.controlBoxLeft, 
changeHeight = posy - this.controlBoxHeight - this.controlBoxTop, 
// 計算總寬度 
allWidth = this.controlBoxWidth + changeWidth + this.controlBoxLeft , 
allHeight = this.controlBoxHeight + changeHeight + this.controlBoxTop; 
//改變寬度 
myStyle.width = (this.controlBoxWidth + changeWidth) + 'px'; 
myStyle.height = (this.controlBoxHeight + changeHeight) + 'px'; 
// 限制最大寬度 
if (allWidth > this.warpWidth) { 
myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px'; 
} 
if (allHeight > this.warpHeight) { 
myStyle.height = (this.warpHeight - this.controlBoxTop) + 'px'; 
} 
// 限制最小寬度 
if ( parseInt(myStyle.width) < minWidth)myStyle.width = minWidth + 'px'; 
if (parseInt(myStyle.height) < minHeight) myStyle.height = minHeight + 'px'; 
// 右上角 
} else if (this.draging == this.resizeTr) { 
// 需要改變的寬度，該變高度即改變TOP的坐標(biāo) 
changeWidth = posx - this.controlBoxWidth - this.controlBoxLeft; 
// 計算總寬度 
allWidth = this.controlBoxWidth + changeWidth + this.controlBoxLeft; 
// 改變寬度 
myStyle.width = (this.controlBoxWidth + changeWidth) + 'px'; 
if (allWidth > this.warpWidth) myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px'; 
if ( parseInt(myStyle.width) < minWidth) myStyle.width = minWidth + 'px'; 
// 改變高度 
my.style.top = posy + 'px'; 
my.style.height = (this.controlBoxHeight + (this.controlBoxTop - posy)) +'px'; 
if(parseInt(my.style.height)< minHeight){ 
my.style.height = minHeight +'px'; 
my.style.top = (this.lb_y - minHeight) + 'px'; 
} 
if(parseInt(my.style.height)>this.lb_y){ 
my.style.height = this.lb_y + 'px'; 
my.style.top = 0; 
} 
// 左上角 
}else if (this.draging == this.resizeLt) { 
changeWidth = this.controlBoxLeft - posx; 
changeHeight = this.controlBoxTop - posy; 
my.style.left = posx + 'px'; 
my.style.width = (this.controlBoxWidth + changeWidth) + 'px'; 
my.style.top = posy + 'px'; 
my.style.height = (this.controlBoxHeight + changeHeight) + 'px'; 
// 限制寬高度最大值 
if(parseInt(my.style.width) > this.controlBoxLeft + this.controlBoxWidth){ 
my.style.width = (this.controlBoxLeft + this.controlBoxWidth) + 'px'; 
my.style.left = 0; 
}else if(parseInt(my.style.width)< minWidth){ 
my.style.left = (this.rb_x - minWidth) + 'px'; 
my.style.width = minWidth + 'px'; 
} 
if(parseInt(my.style.height) > this.controlBoxHeight + this.controlBoxTop){ 
my.style.height = (this.controlBoxHeight + this.controlBoxTop) + 'px'; 
if(parseInt(my.style.top)<0) my.style.top = 0; 
}else if(parseInt(my.style.height)< minHeight){ 
my.style.top = (this.rb_y - minHeight) + 'px'; 
my.style.height = minHeight + 'px'; 
} 
// 左下角 
}else if(this.draging == this.resizeBl){ 
changeWidth = this.controlBoxLeft - posx; 
changeHeight = posy - this.controlBoxHeight - this.controlBoxTop; 
my.style.left = posx + 'px'; 
my.style.width = this.controlBoxWidth + changeWidth + 'px'; 
my.style.height = this.controlBoxHeight + changeHeight + 'px'; 
if(parseInt(my.style.width)< minWidth){ 
my.style.width = minWidth + 'px'; 
my.style.left = this.lt_x - minWidth + 'px'; 
}else if(parseInt(my.style.width)> this.lt_x){ 
my.style.width = this.lt_x + 'px'; 
my.style.left = 0; 
} 
if(parseInt(my.style.height)< minHeight){ 
my.style.height = minHeight + 'px'; 
}else if(parseInt(my.style.height)> this.warpHeight- this.lt_y){ 
my.style.height = this.warpHeight- this.lt_y +'px'; 
} 
} 
break;

case 'mouseup': 
this.draging = null; 
break; 
} 
}, 
bind:function () { 
var that = this; 
bindEvent(document, 'mousedown', bindFunction(that,that.moveBox)); 
bindEvent(document, 'mousemove', bindFunction(that,that.moveBox)); 
bindEvent(document, 'mouseup', bindFunction(that,that.moveBox)); 
} 
}; 
var demo = new DragBox({ 
outWarpId:'outwarp' 
}); 
})() 
</ script> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS拖拽的進(jìn)一步練習(xí)，移動與拉伸實現(xiàn)代碼_javascript技巧

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：代碼拉伸拖拽

熱門焦點

JS拖拽的進(jìn)一步練習(xí)，移動與拉伸實現(xiàn)代碼_javascript技巧

JS拖拽的進(jìn)一步練習(xí)，移動與拉伸實現(xiàn)代碼_javascript技巧

JS拖拽的進(jìn)一步練習(xí)，移動與拉伸實現(xiàn)代碼_javascript技巧

最新推薦

猜你喜歡

熱門推薦