一、div拖拽移动+控制大小（高度、宽度）
1.演示数据
<div style="position:fixed;top:0;left:0;">
<div >
<div >
拖拽
</div>
<div class="inp">
测试数据01
</div>
<div class="inp">
测试数据02
</div>
<div ></div>
</div>
</div>
2.初始化（页面生成时调用）
var box = ('box')
var drag = ('drag')
var scale = ('scale')
//调用拖拽方法
(drag)
//调用缩放方法
(drag, scale, box)
样式
#box {
width: 100%;
height: 1000px;
position: relative;
}
#title{
width: 100%;
background-color: pink;
text-align: center;
}
#drag {
width: 200px;
height: 200px;
position: relative;
background: #d6d4d9;
cursor: move;
}
#scale {
width: 20px;
height: 20px;
position: absolute;
background-color: #333;
cursor:nesw-resize;
right: 0;
top: 0;
overflow: hidden;
}
.inp{
width: 100%;
}
方法
//拖拽方法
dragTop(node) {
//鼠标落下
= function (ev) {
//浏览器兼容处理
var e = ev || ;
//点击鼠标记录当前位置
//水平方向 = 鼠标左边距离 - 被拖拽元素距离左边距离
var offsetX = - ;
//垂直方向 = 鼠标上边距离 - 被拖拽元素距离上边距离
var offsetY = - ;
//鼠标移动在document上
= function (ev) {
//当前鼠标事件对象
var e = ev || ;
//拖拽元素左边距离 = 当前鼠标左边距离 - 距离左边距离
var currentLeft = - offsetX;
//拖拽元素上边距离 = 当前鼠标上边距离 - 距离上边距离
var currentTop = - offsetY;
//限制出界
if (currentLeft <= 0) {
currentLeft = 0;
}
//窗口宽度
var windowWidth = || ;
if (currentLeft >= windowWidth - ) {
currentLeft = windowWidth -
}
if (currentTop <= 0) {
currentTop = 0;
}
//窗口高度
var windowHeight = || ;
if (currentTop >= windowHeight - ) {
currentTop = windowHeight -
}
= currentLeft+'px';
= currentTop+'px';
}
//鼠标抬起取消拖拽
= function(){
= null;
}
}
},
// 缩放
scaleTool(drag, scale, box) {
= function (e) {
//阻止冒泡 避免缩放触发移动事件
()
// 取消事件的默认动作
()
// 定义position
var position = {
'w': , // 被缩放元素的offsetWidth
'h': , // 被缩放元素的offsetHeight
'x': , // 当前窗口鼠标指针的水平坐标
'y': , // 当前窗口鼠标指针的垂直坐标
}
();
= function (ev) {
()
// 设置最大缩放为30*30 取最大值
var w = (200, - + )
var h = (200, - + )
// 设置最大的宽高
w = w >= - ? - : w;
h = h >= - ? - : h;
= w + 'px';
= h + 'px';
}
// 鼠标离开和抬起取消缩放
= function () {
= null;
drag, onmouseup = null;
}
= function () {
= null;
drag, onmouseup = null;
}
}
},
二、单独只控制div的宽度
1.演示数据
<div style="width:200px;height:150px;background-color:#ccc; position: fixed;overflow: hidden;">
<div style="width: 100%;">
账户：<input type="text" style="width: 90%;">
</div>
</div>
2.初始化（页面生成时调用）
()
方法
inserted (el) {
const dragDom = ('myDiv');
= "e-resize";
= (e) => {
var windowWidth = || ;
// 鼠标按下，计算当前元素距离可视区的距离
const disX = ;
const w = ;
const minW = 200;
const maxW = windowWidth - ;
var nw;
= function (e) {
// 通过事件委托，计算移动的距离
const l = - disX;
// 改变当前元素宽度，不可超过最小最大值
nw = w + l;
nw = nw < minW ? minW : nw;
nw = nw > maxW ? maxW : nw;
= `${nw}px`;
};
= function (e) {
= null;
= null;
};
};
},
