html怎样让div能拖动,让div在父div中拖动.html

#big {

border: 1px solid #FF3300;

width: 300px;

height: 300px;

position: relative;

}

#small {

background: #99CC00;

width: 50px;

height: 50px;

position: absolute;

cursor: pointer;

}

function small_down(e) {

var obig = document.getElementById("big");

var osmall = document.getElementById("small");

var e = e || window.event;

/*用于保存小的div拖拽前的坐标*/

osmall.startX = e.clientX - osmall.offsetLeft;

osmall.startY = e.clientY - osmall.offsetTop;

/*鼠标的移动事件*/

document.onmousemove = function(e) {

var e = e || window.event;

osmall.style.left = e.clientX - osmall.startX + "px";

osmall.style.top = e.clientY - osmall.startY + "px";

/*对于大的DIV四个边界的判断*/

if (e.clientX - osmall.startX <= 0) {

osmall.style.left = 0 + "px";

}

if (e.clientY - osmall.startY <= 0) {

osmall.style.top = 0 + "px";

}

if (e.clientX - osmall.startX >= 250) {

osmall.style.left = 250 + "px";

}

if (e.clientY - osmall.startY >= 250) {

osmall.style.top = 250 + "px";

}

};

/*鼠标的抬起事件,终止拖动*/

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

};

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史