Javascript制作拖拽网页页面合理布局的方法

日期：2021-03-31 类型：科技新闻我要分享

关键词：建站平台有哪些，如何建设网站，免费自助建站，如何建立一个网站，网站建站的

近几天并不是比较忙，就找了些拖拽合理布局层面的材料看一下，也学着写了个拖拽合理布局的实际效果，想不到花了许多時间，
东拼西凑，终于是把这一实际效果写成来啦。哎！還是js的时间太差。由于是边找材料边写的，许多地区印像不深，
時间一长，再再次写估算也难，因此把那时候的构思纪录一下！也期待大龙虾指导一下！

好啦，转到文章正文，在刚开始以前先详细介绍好多个作用涵数！
1.文件格式化恶性事件的涵数
编程代码
function getEvent(){
//同时适配ie和ff的书写
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)== object arg0.preventDefault arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}

2.获得电脑鼠标的部位
编程代码
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

3.获得原素的部位
编程代码
function getPosition(ele){
var left = 0;
var top = 0;
while (ele.offsetParent){
left += ele.offsetLeft;
top += ele.offsetTop;
ele = ele.offsetParent;
}
left += ele.offsetLeft;
top += ele.offsetTop;
return {x:left, y:top};
}
最先，自然是写好原始合理布局的网页页面，查询原始网页页面实际效果

一般拖拽的原素是追随电脑鼠标的，我的构思是在把拖拽的原素提升到一个position为absolute的div中，
电脑鼠标拖拽的情况下就要它的部位依据电脑鼠标的座标转变便可以了。因此在网页页面提升了个onload
编程代码
var tmpDiv=null;//临时性储放拖拽目标的div
window.onload=function(){
tmpDiv=document.createElement( div
tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;';
document.body.appendChild(tmpDiv);
}

要完成拖拽，最先开启的恶性事件是mouseDown,因此我还在拖拽的table的一个td上关联了onmousedown= mouseDown(this);
编程代码
var dragObject = null;//拖拽的原素(table)
var mouseOffset = null;//电脑鼠标的在拖拽原素中的部位
var dragDiv=null;//拖拽的table所属的列的div
var eleDivW=null;//拖拽的table的父连接点(div)的高宽比
var dragDivLen=null;//拖拽的table所属的列的div选用来置放table的div的数量
var DragContainer=[ col1 , col2 , col3 //用于完成列合理布局的div的id
//电脑鼠标按住拖拽的原素
function mouseDown(elem){
ev=getEvent();
dragObject = elem.parentNode.parentNode.parentNode;//被拖拽的table
dragDiv=dragObject.parentNode.parentNode;
//拖拽原素所属列里div的数量
dragDivLen=dragDiv.getElementsByTagName( div ).length;
mouseOffset = getMouseOffset(dragObject, ev);
eleDivW=dragObject.parentNode.offsetWidth;
dragObject.parentNode.style.border= 1px dotted #FFCC66
return false;
}
//获得电脑鼠标在拖拽原素中的部位
function getMouseOffset(target, ev){
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

剩余确当然便是电脑鼠标移动拖拽目标也可以移动，采用确当然便是mouseMove咯，为简易我还在document上关联，
编程代码
document.onmousemove = mouseMove;
function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.parentNode.style.display= none //设定置放被拖拽table的div掩藏
//把拖拽的table放进临时性的div中，并设定其座标
for(var i=0; i tmpDiv.childNodes.length; i++) tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.appendChild(dragObject.cloneNode(true));
tmpDiv.style.width=eleDivW+ px
tmpDiv.style.backgroundColor= #FFFFFF
tmpDiv.style.display= block
tmpDiv.style.top = (mousePos.y - mouseOffset.y)+ px
tmpDiv.style.left = (mousePos.x - mouseOffset.x)+ px
}
return false;
}

拥有mousemove自然免不了mouseup
编程代码
document.onmouseup = mouseUp;
//电脑鼠标松掉
function mouseUp(){
if(dragObject){
if(dragObject.parentNode.style.display== none ) dragObject.parentNode.style.display= block
dragObject.parentNode.style.border= 1px solid #FFCC66
tmpDiv.style.display= none
//这儿是分辨当列里有可拖拽的原素时消除前边设定的高宽比值20px
for(var m=0;m DragContainer.length;m++){
var colDiv=document.getElementById(DragContainer[m]);
var colDivLen=colDiv.getElementsByTagName( div ).length
var colSty=colDiv.getAttribute( style
if(colDivLen 0 colSty!=null){
colDiv.removeAttribute( style
break;
}
}
dragObject=null;
}
}

看一下不是是能够拖拽了，如果你松掉电脑鼠标单击时，拖拽的原素将返回原先的部位查询拖拽网页页面实际效果

最终要做的便是让拖拽原素不返回原先的部位，只是返回大家拖拽的部位。
下边是mousemove恶性事件的全部编码，看一下注解就搞清楚了
编程代码
function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
//可拖拽的数量为1,表明拖拽后此列就沒有拖拽原素，为防止此列沒有高宽比而看不到，因此设定其高宽比为20px
if(dragDivLen==1) dragDiv.style.height= 20px
dragObject.parentNode.style.display= none
//把拖拽的原素添加到临时性的tmpDiv中，并设定tmpDiv座标
for(var i=0; i tmpDiv.childNodes.length; i++) tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.appendChild(dragObject.cloneNode(true));
tmpDiv.style.width=eleDivW+ px
tmpDiv.style.backgroundColor= #FFFFFF
tmpDiv.style.display= block
tmpDiv.style.top = (mousePos.y - mouseOffset.y)+ px
tmpDiv.style.left = (mousePos.x - mouseOffset.x)+ px
//被拖拽目标的管理中心点的座标
var dragObjCntX=mousePos.x - mouseOffset.x+parseInt(dragObject.offsetWidth)/2;
var dragObjCntY=mousePos.y - mouseOffset.y+parseInt(dragObject.offsetHeight)/2;
//分辨tmpDiv所属的列
var dragConLen=DragContainer.length;
for(var i=0;i dragConLen;i++){
var curContainer=document.getElementById(DragContainer[i]);
var dcPos=getPosition(curContainer);
var dcPosMinX=dcPos.x;
var dcPosMinY=dcPos.y;
var dcWidth=curContainer.offsetWidth;
var dcHeight=curContainer.offsetHeight;
var dcPosMaxX=dcPosMinX+dcWidth;
var dcPosMaxY=dcPosMinY+dcHeight;
if(dragObjCntX dcPosMinX dragObjCntX dcPosMaxX dragObjCntY dcPosMinY dragObjCntY dcPosMaxY){
var activeContainer=curContainer;
break;
}
}
}
//分辨tmpDiv在此列哪一个区块链范畴内
if(activeContainer){
var beforNode=null;
var sDiv=activeContainer.getElementsByTagName( div )
var acChiLen=sDiv.length;
for(j=acChiLen-1;j j--){
var activeDiv=sDiv[j];
if(activeDiv){
var activeDivPos=getPosition(activeDiv);
var activeDivMinX=activeDivPos.x;
var activeDivMinY=activeDivPos.y;
var activeDivMaxX=activeDivMinX+activeDiv.offsetWidth;
var activeDivMaxY=activeDivMinY+activeDiv.offsetHeight;
if(activeDivMaxX dragObjCntX activeDivMaxY dragObjCntY){
//if(dragObjCntX activeDivMinX dragObjCntX activeDivMaxX dragObjCntY activeDivMinY dragObjCntY activeDivMaxY){
beforNode=activeDiv;
}
}

}
//若此区块链存有，就在此区块链前插进拖拽原素
if(beforNode!=null){
if(dragObject.parentNode!=beforNode){
curContainer.insertBefore(dragObject.parentNode,beforNode);
dragObject.parentNode.style.display= block
//document.getElementById( test ).value=curContainer.id;
}
}
//不会有就在所属列插进拖拽原素
else{
curContainer.appendChild(dragObject.parentNode);
dragObject.parentNode.style.display= block
}
}
return false;
}

好啦，一个能够拖拽合理布局的网页页面就进行了查询最后网页页面实际效果

工作能力比较有限，一些地区将会说的不清不楚，若有兴趣爱好，自身好好地看一下编码吧。
有哪些不够的地区，请赐教。
HTML5自适应网站基本建设处理计划方案

伴随着移动互联网网的朝气蓬勃发展趋势,很多的传统式网站早已不可以考虑移动互...

查询