搜 索

js实现简单的div标签自由在页面中拖动效果

编辑:QTOOL.NET日期:2019-10-2592

本文介绍了使用js代码实现简单的div标签绘制的矩形图案在网页页面中自由上下左右拖动的布局效果。

css样式代码:

<style type="text/css">

#div-a1 {

width: 70px;

height: 70px;

background:#BC3B3D;

position: absolute;

}

#div-a2 {

height: 30px;

width: 30px;

background:#007635;

position: absolute;

}

#div-a3 {

height: 100px;

width: 100px;

background:#8794F8;

position: absolute;

}

</style>

 js代码:

<script type="text/javascript">


function ch(divname){

var divhq = document.getElementById(divname);

divhq.onmousedown=function(zb){

var zevent = event || zb;

var divX = zevent.clientX - divhq.offsetLeft;

var divY = zevent.clientY - divhq.offsetTop;


document.onmousemove=function(zb){

var zevent= event || zb;

divhq.style.left=zevent.clientX-divX+"px";

divhq.style.top=zevent.clientY-divY+"px";


};

document.onmouseup=function(zb){

alert("当前坐标x:"+divhq.style.left+"y:"+divhq.style.top);

document.onmouseup="";

document.onmousemove="";


}

}


}

window.onload=function(){

ch("div-a1");

ch("div-a2");

ch("div-a3");

}

</script>

html代码:

<div id="div-a1"></div>

<div id="div-a2"></div>

<div id="div-a3"></div>

其中我们创建了三个id分别为div-a1、div-a2、div-a3的html矩形

在css代码中设置第一个矩形大小为70x70px,第二个矩形大小为30x30px,第三个矩形大小为100x100px

设置三个元素都为绝对定位

然后创建一个ch(divname)类用来响应鼠标的点击与按下拖动事件是处理选中div矩形的在页面中x、y位置值

这里用.style.left与.style.top属性来控制指定的div矩形位置

在ch函数中分别设置在div元素被点击按下事件、按下拖动事件、按下松开事件时div元素的坐标参数以及计算出拖动后的坐标.

window.onload=function(){

ch("div-a1");

ch("div-a2");

ch("div-a3");

}

为在页面与图像加载完成之后为指定id的div元素调用我们创建的ch函数实现在网页页面中自由拖拽效果.

TAG标签:js网页布局
此文章由QTOOL.NET编辑
最新文章

热门标签