html 可以拖动的div,多个div实现随意拖拽功能

鼠标事件

mousedown

mousemove

mouseup

注意事项:

被拖动的div的position属性值一定是absolute。切记不可使用margin-top:10px;而应该使用top:10px;

onmousedown事件需要在window.onload时加载。

如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。

代码如下：

tuozhuai

* {

margin: 0px;

padding: 0px;

}

div {

width: 100px;

height: 100px;

background: red;

position: absolute;

top: 5%;

}

#div1 {

width: 100px;

height: 100px;

background: red;

position: absolute;

top: 10%;

left: 5%;

}

function drag(id) {

var odiv = document.getElementById(id)

odiv.onmousedown = function(ev) {

var ev = ev || event;

var disX = ev.clientX - odiv.offsetLeft;

var