首页/ 填坑/ 文章详情

Javascript 鼠标拖动div修改其自身大小

对于一个非常规的需求都是一次新的挑战,那怕是一个经验丰富的老前端。

需求背景:

在一个父DIV层里,充许用户拖动DIV子层修改其宽高,并限制其不能溢出父DIV层。

简短的需求,第一眼,你会觉得是一个小的功能开发,容易。但在不知道其构造原理下,只会撞的满头包。这次开发涉及鼠标三件事件的应用:mousedownmousemovemouseup,由它们组成一个动作操作闭环。

CSS样式:

CSSbody { background: #F5F5F5; }
body,div,p { margin: 0; padding: 0; }
.wrap { position: relative; width: 600px; height: 380px; margin: 20% auto; background: #FFF; }

.drop-item { position: absolute; left: 200px; top: 150px; text-align: center;color: #515659;font-size: 14px; width: 180px; line-height: 40px; border: 1px dashed #4680ff; z-index: 1;}
.drop-item {  -webkit-user-select: none; user-select: none;  }
.drop-item div { position: relative; }
.drop-item div p { display: block; height: 40px; overflow: hidden;}
.drop-item div span { position: absolute; bottom: -6px; right: -6px; display: block; width: 12px; height: 12px; border: solid 1px #ccc; border-radius: 100%; background: #FFF; z-index: 4; cursor: w-resize; }

HTML代码:

HTML<div class="wrap">
    <div class="drop-item">
        <div>
            <p>鼠标拖动右下角,改变宽度</p>
            <span class="resize-btn"></span>
        </div>
    </div>
</div>

渲染时,子DIV层悬浮在父DIV层之上,DIV右下角模似resize的效果,用户拖动 resize 按钮,实时修改。

监听 resize 按钮鼠标事件:

JSvar drop = { status: false}; //全局变量

$('.resize-btn').mousedown(function(event) {
    event.stopPropagation();
    drop.status = true;
    drop.screenX = event.screenX;
    drop.width = $(this).parent().width();
    drop.positionX = $(this).parent().parent().position().left;
    drop.container = $(this).parent().parent();
    drop.containerW = $(this).parent().parent().parent().width();
});

触发动作之前,记录鼠标点击按钮初次坐标数据,同时声明动作已开始。

监听document鼠标移动事件:

JS$(document).mousemove(function(event){ //鼠标移动事件
    if(!drop.status) { //控制动作是否进行中
        return false;
    }

    var width = drop.width;
    var positionX = drop.positionX;
    var container = drop.container;
    var containerW = drop.containerW;

    if(event.screenX > drop.screenX) {
        width = width + event.screenX - drop.screenX;
    } else {
        width = width - (drop.screenX - event.screenX);
    }

    if(positionX + width > containerW) { //限制DIV的宽
        width = containerW - positionX;
    }

    if (width < 60) { //设置DIV最小宽度
        width = 60;
    }

    container.css('width',width);
}); 

鼠标按着并拖动鼠标移动时,监听的对象由按钮转变成document。通过当前坐标数据与第一次坐标数据进行计算,实时修改DIV的大小。

※ 鼠标移动时,容易超出按钮面积范围,mousemove事件监听失败,换成document全局监听。

监听document鼠标松开事件:

JS$(document).mouseup(function(event){ //鼠标松开事件
    drop.status = false;
}) 

当松开鼠标按钮时,动作行为结束,重新将drop.status设置false状态,鼠标移动事件自动中止执行计算,形成一个完整的动作闭环事件。

※ 样例中没有设置DIV高的计算,不是漏了,只是需求上没有,个别有需求的请自我完善。

文章评论0 records

最新 最早

0

最新评论Latest comments

big2catbig2cat 08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)