介绍 & lt; template>
& lt; div>
& lt; ul类=癰ox"ref=癰ox"比;
& lt;李类=發eft"ref=發eft"祝辞西瓜& lt;/li>
& lt;李类=皉esize"ref=皉esize"祝辞& lt;/li>
& lt;李类=癿id"ref=癿id"祝辞备注2 & lt;/li>
& lt;李类=皉esize2"ref=皉esize2"祝辞& lt;/li>
& lt;李类=皉ight"ref=皉ight"祝辞test
& lt;/ul>
& lt; ul类=癰ox"ref=癰ox"比;
& lt;李类=發eft"ref=發eft"祝辞芒果& lt;/li>
& lt;李类=皉esize"ref=皉esize"祝辞& lt;/li>
& lt;李类=癿id"ref=癿id"祝辞备注& lt;/li>
& lt;李类=皉esize2"ref=皉esize2"祝辞& lt;/li>
& lt;李类=皉ight"ref=皉ight"祝辞test
& lt;/ul>
& lt;/div>
& lt;/template> & lt; script>
出口默认{
安装(){
this.dragControllerDiv ();
},
方法:{
dragControllerDiv:函数(){
var调整=document.getElementsByClassName(& # 39;调整# 39;);
var resize2=document.getElementsByClassName (& # 39; resize2& # 39;);
var左=document.getElementsByClassName(& # 39;左# 39;);
正确var=document.getElementsByClassName(& # 39;对# 39;);
var=document.getElementsByClassName中期(& # 39;中期# 39;);
var盒=document.getElementsByClassName(& # 39;盒# 39;);
(让我=0;我& lt;resize.length;我+ +){
调整[我]。onmousedown=function (e) {
var startX=e.clientX;
调整[我]。左=调整[我].offsetLeft;
文档。onmousemove=function (e) {
var endX=e.clientX;
var rightW=[我].offsetWidth正确;
var moveLen=调整[我]。左+ (endX - startX);
var maxT=[我]。clientWidth——调整[我].offsetWidth;
如果(moveLen & lt;150)moveLen=150;
如果(moveLen比;maxT - rightW - 150) moveLen=maxT - rightW - 150;
调整[我].style。左=moveLen;
(让j=0;j & lt;left.length;j + +) {
[j] .style离开了。宽度=moveLen + & # 39; px # 39;;
[j] .style中期。宽度=(箱[我]。clientWidth - moveLen rightW - 10) + & # 39; px # 39;;
}
}
文档。onmouseup=function (evt) {
文档。onmousemove=零;
文档。onmouseup=零;
调整[我]。releaseCapture,,调整[我].releaseCapture ();
}
调整[我]。setCapture,,调整[我].setCapture ();
返回错误;
}
}
(让我=0;我& lt;resize2.length;我+ +){
resize2[我]。onmousedown=function (e) {
var startX=e.clientX;
resize2[我]。左=resize2[我].offsetLeft;
文档。onmousemove=function (e) {
var endX=e.clientX;
var leftW=[我].offsetWidth离开;
var moveLen=resize2[我]。左+ (endX - startX) - leftW;
var maxT=[我]。clientWidth——resize2[我]。offsetWidth - 5;
如果(moveLen & lt;150)moveLen=150;
如果(moveLen比;maxT - leftW - 150) moveLen=maxT - leftW - 150;
resize2[我].style。左=moveLen;
(让j=0;j & lt;right.length;j + +) {
[j] .style中期。宽度=moveLen + & # 39; px # 39;;
正确的[j] .style。宽度=(箱[我]。clientWidth - moveLen leftW - 10) + & # 39; px # 39;;
}
}
文档。onmouseup=function (evt) {
文档。onmousemove=零;
文档。onmouseup=零;
resize2[我]。releaseCapture,,resize2[我].releaseCapture ();
}
resize2[我]。setCapture,,resize2[我].setCapture ();
返回错误;
}
}
}
}
}
& lt;/script> & lt;风格scoped>
ul,李{
list-style:没有;
显示:块;
保证金:0;
填充:0;
}
.box {
宽度:800 px;
高度:32像素;
溢出:隐藏;
}
.left {
宽度:钙(30% - 10 px);
高度:100%;
背景:天蓝色;
浮:左;
}
.resize {
宽度:5 px;
高度:100%;
光标:w-resize;
浮:左;
}
.resize2 {
宽度:5 px;
高度:100%;
光标:w-resize;
浮:左;
}
铃声{
浮:左;
宽度:35%;
高度:100%;
背景:番茄;
}
.mid {
浮:左;
宽度:35%;
高度:100%;
背景:# f00;
}
& lt;/style>
使用Vue实现拖动改变元素宽度的方法?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
需求:
原理:
拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(左),来实现拖动之后的不同宽度的计算,当拖动分隔线1时,计算元素框左和中期;当拖动分隔线2时,计算元素框和中期;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture()和ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。
html部分代码:
js部分代码:
风格部分:
