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

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

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;

}

js代码：

function ch(divname){

var divhq = document.getElementById(divname);

divhq.οnmοusedοwn=function(zb){

var zevent = event || zb;

var divX = zevent.clientX - divhq.offsetLeft;

var divY = zevent.clientY - divhq.offsetTop;

document.οnmοusemοve=function(zb){

var zevent= event || zb;

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

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

};

document.οnmοuseup=function(zb){

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

document.οnmοuseup="";

document.οnmοusemοve="";

}

}

}

window.οnlοad=function(){

ch("div-a1");

ch("div-a2");

ch("div-a3");

}

html代码：

其中我们创建了三个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.οnlοad=function(){

ch("div-a1");

ch("div-a2");

ch("div-a3");

}

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