<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#main div{position:absolutewidth:220pxheight:150pxborder:1px solid #999}
</style>
<script type="text/javascript">
var a
document.onmouseup=function(){if(!a)returndocument.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)a=""}
document.onmousemove=function (d){if(!a)returnif(!d)d=eventa.style.left=(d.clientX-b)+"px"a.style.top=(d.clientY-c)+"px"}
function $(o,e){a=odocument.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE)b=e.clientX-parseInt(a.style.left)c=e.clientY-parseInt(a.style.top)}
</script>
</head>
<body>
<div id="main">
<div style="left:100pxtop:100pxbackground:#fc9" onmousedown="$(this,event)">1</div>
<div style="left:400pxtop:100pxbackground:#9cf" onmousedown="$(this,event)">2</div>
<div style="left:700pxtop:100pxbackground:#f9c" onmousedown="$(this,event)">3</div>
<div style="left:100pxtop:300pxbackground:#9fc" onmousedown="$(this,event)">4</div>
<div style="left:400pxtop:300pxbackground:#c9f" onmousedown="$(this,event)">5</div>
<div style="left:700pxtop:300pxbackground:#cf9" onmousedown="$(this,event)">6</div>
</div>
</body>
</html>
粘贴源码 试试看
resize属性的具体用法可见MDN： https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize实现左右拖拽改变大小时：
HTML
此时的div会出现滚动边框，此时可拖拽的区域只有右下角的一小块。
此时需要将这个区域扩大可进行如下设置。
此时内部文字就被隐藏了，在实际使用时可以通过设置兄弟元素展示文字。
HTML:
CSS
效果链接： http://js.jirengu.com/voleracixe/2/edit
以下直接可以运行。如果DIV在ID为area的div中，即可拖拽。我在Drag函数里做了对父div的判断。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>鼠标拖拽</title>
<script type="text/javascript">
function Drag(o, e){
if(o.parentElement!=document.getElementById('area')) return
var e = window.event || e
var _x = e.offsetX || e.layerX
var _y = e.offsetY || e.layerY
o.style.filter = 'Alpha(opacity=70)'
o.style.opacity = '0.7'
document.onmousemove = function(e){
var e = window.event || e
o.style.left = e.clientX - _x + 'px'
o.style.top = e.clientY - _y + 'px'
o.style.cursor="move"
}
document.onmouseup = function(e){
document.onmousemove = null
o.style.filter = o.style.opacity = ''
o.style.cursor="default"
}
}
</script>
</head>
<body>
<div id='area'>
<div onmousedown="Drag(this, event)" style="position:absoluteborder:1px solid redbackground:pinkwidth:400pxheight:300px"></div>
</div>
<div onmousedown="Drag(this, event)" style="position:absoluteleft:500pxborder:1px solid redbackground:pinkwidth:400pxheight:300px"></div>
</body>
</html>
