js实现web中拖拽出矩形

最新推荐文章于 2021-03-26 15:45:49 发布

weixin_30896511

最新推荐文章于 2021-03-26 15:45:49 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/zhangsir/articles/1092522.html

本文介绍了一种使用JavaScript实现元素拖动的技术。通过监听鼠标按下事件并利用setCapture和releaseCapture方法，可以实现在页面上任意拖动指定元素的效果。文中提供了具体的实现代码，包括鼠标移动和释放时更新元素位置的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
其中代码没调试通过有空看看

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>

-->