鼠标拖动绘制方框

最新推荐文章于 2024-11-20 23:13:30 发布

叶子_o

最新推荐文章于 2024-11-20 23:13:30 发布

阅读量890

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/xiamoziqian/article/details/89453587

javascript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一款用于网页的鼠标拖动绘制DIV的小插件。通过使用HTML、CSS和JavaScript，用户可以在指定区域内自由绘制矩形，并提供删除功能。代码详细展示了如何监听鼠标事件，实现动态绘制和交互。

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

近期做项目遇到了这样一个需求，鼠标拖动绘制div，封装了一个小插件，代码如下。

html部分

<div id="main"></div>
增加一个按钮，可以关闭绘画效果，用来配合测试删除功能
<input type="button" value="停止绘画" id="t"/>

css部分

<style>
   *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    #main{
    	position:relative;
    	border: solid red 1px; 
    	height:90%; 
    	width:600px; 
    	cursor: default;
    	margin: 100px 100px;
    }
    .rectangle{
		position: absolute;
	    left: 289px;
	    top: 84px;
	    height: 92px;
	    width: 133px;
	    border: 2px solid red;
	}
</style>

js部分

    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var Rect = {
            // 左上
            pos1: {},
            // 右上
            pos2: {},
            // 右下
            pos3: {},
            // 左下
            pos4: {},
            //当前正在画的矩形对象
            obj: null,
            //画布
            container: null,
            //初始化函数
            init: function(containerId){
                Rect.container = document.getElementById(containerId);
                Rect.containerLeft = $(Rect.container).offset().left;
                Rect.containerTop = $(Rect.container).offset().top;
                if(Rect.container){
                    //鼠标按下时开始画
                    Rect.container.addEventListener('mousedown',Rect.start);
                }

            },
            start: function(e){
                console.log('wr')
                var o = Rect.obj = document.createElement('div');
                //向o添加一个叉叉，点击叉叉可以删除这个矩形
                var delBtn = document.createElement('span');
                delBtn.className='del';
                delBtn.innerText = "x";
                delBtn.addEventListener('mousedown', function(){
                    Rect.container.removeChild(this.parentNode);
                })
                o.appendChild(delBtn);
                //把当前画出的对象加入到画布中
                Rect.container.appendChild(o);
                o.className = "rectangle";
                o.style.position = "absolute";
                // mouseBeginX，mouseBeginY是辅助变量，记录下鼠标按下时的位置
                o.style.left = Rect.pos1.left = o.mouseBeginX = Rect.getEvent(e).pageX - Rect.containerLeft;
                o.style.top = Rect.pos1.top = o.mouseBeginY = Rect.getEvent(e).pageY - Rect.containerTop;
                o.style.height = 0;
                o.style.width = 0;
                o.style.border = "solid red 2px";
                //处理onmousemove事件
                Rect.container.onmousemove = Rect.move;
                //处理onmouseup事件
                Rect.container.onmouseup = Rect.end;

            },
            move: function(e){
                var o = Rect.obj;
                //dx，dy是鼠标移动的距离
                var dx = Rect.dx = Rect.getEvent(e).pageX - Rect.containerLeft - o.mouseBeginX;
                var dy = Rect.dy = Rect.getEvent(e).pageY - Rect.containerTop - o.mouseBeginY;
                //如果dx，dy <0,说明鼠标朝左上角移动，需要做特别的处理
                // if(dx<0){
                //     o.style.left = Rect.getEvent(e).pageX - Rect.containerLeft;
                // }
                // if(dy<0){
                //     o.style.top = Rect.getEvent(e).pageY - Rect.containerTop;
                // }
                 if(dx<0){
                     o.style.width = 0;
                }
                else if(dy<0){
                    o.style.height = 0;
                }else{
                     o.style.height = dy;
                     o.style.width = dx;
                 }

            },
            end: function(e){
                //onmouseup时释放onmousemove，onmouseup事件句柄
                console.log(Rect.dx,Rect.dy)
                Rect.pos2.left= Rect.getEvent(e).pageX - Rect.containerLeft;
                Rect.pos2.top= Rect.getEvent(e).pageY - Rect.containerTop - Rect.dy;
                Rect.pos3.left= Rect.getEvent(e).pageX - Rect.containerLeft;
                Rect.pos3.top= Rect.getEvent(e).pageY - Rect.containerTop;
                Rect.pos4.left= Rect.getEvent(e).pageX - Rect.containerLeft - Rect.dx;
                Rect.pos4.top= Rect.getEvent(e).pageY - Rect.containerTop;
                // 如果只是点击 移除最后添加的节点
                if(Rect.pos1.left == Rect.pos2.left || !Rect.dx || !Rect.dy || Rect.dx <= 0 || Rect.dy <= 0){
                    $('#main .rectangle:last').remove()
                }
                Rect.container.onmousemove = null;
                Rect.container.onmouseup = null;
                Rect.obj = null;
                // 拿到四个位置 顺时针
                console.log(Rect.pos1,Rect.pos2,Rect.pos3,Rect.pos4);
            },
            //辅助方法，处理IE和FF不同的事件模型
            getEvent: function(e){
                if (typeof e == 'undefined'){
                    e = window.event;
                }
                //alert(e.x?e.x : e.layerX);
                if(typeof e.x == 'undefined'){
                    e.x = e.layerX;
                }
                if(typeof e.y == 'undefined'){
                    e.y = e.layerY;
                }
                return e;
            }
        };

    //测试代码开始
    //初始化
    Rect.init("main");

    document.getElementById('t').onclick = function(){
        Rect.container.onmousedown = null;
    };
</script>