js实现web中拖拽出矩形
<script>
function md(){
d.style.display="";
d.setCapture();
d.onmouseup=d.onlosecapture=mu;
d.onmousemove=mv;
d.startX=event.clientX;
d.startY=event.clientY;
d.style.left=event.x;
d.style.top=event.y;
d.style.width=0;
d.style.height=0;
}
function mu(){
d.releaseCapture();
d.style.display="none";
}
function mv(){
var x2=event.clientX;
var y2=event.clientY;
x=Math.min(d.startX,x2);
y=Math.min(d.startY,y2);
x1=Math.max(d.startX,x2);
y1=Math.max(d.startY,y2);
with(d.style){
left=x;
top=y;
width=x1-x;
height=y1-y;
}
}
/*
filter:alpha(opacity=12); 支持IE
-moz-opacity:0.12; 支持FF
opacity:0.12; 支持未知
*/
</script>
<body onmousedown=md() >
this is the content ,test,
<div style="border:#444 1px solid;position:absolute;overflow:hidden;background-Color:#eee;display:none;filter:alpha(Opacity=60);" id="d"></div>
<!-- 附：JS拖动技术--- 关于setCapture
其中代码没调试通过 有空看看
<script type="text/javascript">
<!--
window.onload=function(){
objDiv = document.getElementById('drag');
drag(objDiv);
};
function drag(dv){
dv.onmousedown=function(e){
var d=document;
e = e || window.event;
var x= e.layerX || e.offsetX;
var y= e.layerY || e.offsetY;
//设置捕获范围
if(dv.setCapture){
dv.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove=function(e){
e= e || window.event;
if(!e.pageX)e.pageX=e.clientX;
if(!e.pageY)e.pageY=e.clientY;
var tx=e.pageX-x;
var ty=e.pageY-y;
dv.style.left=tx;
dv.style.top=ty;
};
d.onmouseup=function(){
//取消捕获范围
if(dv.releaseCapture){
dv.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//清除事件
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
--------
<div id="drag" >drag me <div>
-->
