2022年10月19日

原生js实现宽度拖拽效果


原生js实现宽度拖拽效果,也是在网站切图前端外包项目中遇到的,关于拖拽改变宽度的插件要就太强大但是累赘,要就是简单但不够用,拖拽效果本身不复杂,只需要核心的几句话代码即可实现,于是决定用js写一个更加与项目契合,说做就做,用了原生js 代表量并不多,附代码:


var hctn = document.getElementById("hContainer");
var leftd = document.getElementById('drag-left');
var vbar = document.getElementById('vDragbar');

const vdrag = (e) => {
console.log(document.body.clientWidth);
//leftd.style.width = (e.pageX - vbar.offsetWidth / 2 - hctn.offsetLeft) + 'px';
var wd = (document.body.clientWidth - vbar.offsetWidth/2 - e.pageX );
if(wd<=40){
hctn.style.width = 40 + 'px';
document.getElementById("content").style.display = 'none';
$('#vClose').addClass('on');

}
else{
hctn.style.width = wd + 'px';
document.getElementById("content").style.display = 'block';
$('#vClose').removeClass('on');
}

}

vbar.addEventListener('mousedown', () => {
document.addEventListener('mousemove', vdrag);
});

vbar.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', vdrag);
});

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》