87,910
社区成员
发帖
与我相关
我的任务
分享如何实现div元素的拖拽移动和改变尺寸大小？
做了一个 拖拽移动和改变大小的功能，代码见后部。现在能够实现拖拽移动和改变大小，但是并不理想：
我现在完成的代码可以实现：鼠标按住div 左半边拖拽可以移动元素，鼠标按住div右半部移动可以改变大小
问题：
1、没有按左半边移动的时候，div都要往左上角跳一次，使得鼠标在div的又小角。很是困惑不知道为什么，我不希望它跳。
2、现在是按左半边移动，按右半边改变大小，有点不符合用户的操作习惯。一般都是 鼠标挪到div中间 按下左键显示 移动的符号（十字箭头，或者手掌），表示可以挪动，然后拖动就移动。 鼠标移到div的右下角区域就变成 斜箭头，表示可以改变尺寸，一拉就改变尺寸。我想实现这样的功能。请问如何才能做到呢？
3、还有我想实现，一个按钮“编辑”，按下后 才可以拖动和改变， 在按一下就不可以。（以后我要做成用ajax将改变的属性写到文件里面，这样就可以实现配置保存了）
源码：
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body style="border:1px; solid #ccc;height: 100%;">
<div id="div2" style="width:100px;height:80px;left:10px;top:8px;background-color:#00BCD4;position:relative;border:1px solid #ccc;margin:20px 10px;padding:7px 6px;">
</div>
</body>
</html>
<script type="text/javascript">
/*
* jQuery.Resize by wuxinxi007
* Date: 2011-5-14
*/
$(function() {
//绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById('div2'));
});
function bindResize(el) {
//初始化参数
var els = el.style,
//鼠标的 X 和 Y 轴坐标
x = y = 0;
//邪恶的食指
$(el).mousedown(function(e) {
if(e.offsetX > el.offsetWidth / 2) {
//按下元素后，计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth,
y = e.clientY - el.offsetHeight;
//在支持 setCapture 做些东东
el.setCapture ? (
//捕捉焦点
el.setCapture(),
//设置事件
el.onmousemove = function(ev) {
domResize(ev || event)
},
el.onmouseup = UnbindResize) : (
//绑定事件
$(document).bind("mousemove", domResize).bind("mouseup", UnbindResize)
)
}else
{
//按下元素后，计算当前鼠标与对象计算后的坐标
x = el.offsetWidth,
y = el.offsetHeight;
//在支持 setCapture 做些东东
el.setCapture ? (
//捕捉焦点
el.setCapture(),
//设置事件
el.onmousemove = function(ev) {
domMove(ev || event)
},
el.onmouseup = UnbindMove) : (
//绑定事件
$(document).bind("mousemove", domMove).bind("mouseup", UnbindMove)
)
}
//防止默认事件发生
e.preventDefault()
});
//调整事件
function domResize(e) {
//宇宙超级无敌运算中...
els.width = e.clientX - x + 'px',
els.height = e.clientY - y + 'px'
}
//移动事件
function domMove(e) {
els.left = e.pageX - x + 'px';
els.top = e.pageY - y + 'px';
}
//停止事件
function UnbindResize() {
//在支持 releaseCapture 做些东东
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", domResize).unbind("mouseup", UnbindResize)
)
}
//停止事件
function UnbindMove() {
//在支持 releaseCapture 做些东东
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", domMove).unbind("mouseup", UnbindMove)
)
}
}
</script>
...全文
请发表友善的回复…
发表回复
Sunny ღ 2020-11-27
- 打赏
- 举报
楼主问题解决了吗 怎么解决的呢 遇到同样的问题
bdview 2018-05-26
- 打赏
- 举报
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body style="border:1px; solid #ccc;height: 100%;">
<div id="div2" style="width:100px;height:80px;left:10px;top:8px;background-color:#00BCD4;position:relative;border:1px solid #ccc;margin:20px 10px;padding:7px 6px;">
</div>
</body>
</html>
<script type="text/javascript">
/*
* jQuery.Resize by wuxinxi007
* Date: 2011-5-14
*/
$(function() {
//绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById('div2'));
});
function bindResize(el) {
//初始化参数
var els = el.style,
//鼠标的 X 和 Y 轴坐标
x = y = 0;
//邪恶的食指
$(el).mousedown(function(e) {
if(e.offsetX > el.offsetWidth / 2) {
//按下元素后，计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth,
y = e.clientY - el.offsetHeight;
//在支持 setCapture 做些东东
el.setCapture ? (
//捕捉焦点
el.setCapture(),
//设置事件
el.onmousemove = function(ev) {
domResize(ev || event)
},
el.onmouseup = UnbindResize) : (
//绑定事件
$(document).bind("mousemove", domResize).bind("mouseup", UnbindResize)
)
}else
{
//按下元素后，计算当前鼠标与对象计算后的坐标
x = el.offsetWidth,
y = el.offsetHeight;
//在支持 setCapture 做些东东
el.setCapture ? (
//捕捉焦点
el.setCapture(),
//设置事件
el.onmousemove = function(ev) {
domMove(ev || event)
},
el.onmouseup = UnbindMove) : (
//绑定事件
$(document).bind("mousemove", domMove).bind("mouseup", UnbindMove)
)
}
//防止默认事件发生
e.preventDefault()
});
//调整事件
function domResize(e) {
//宇宙超级无敌运算中...
els.width = e.clientX - x + 'px',
els.height = e.clientY - y + 'px'
}
//移动事件
function domMove(e) {
els.left = e.pageX - x + 'px';
els.top = e.pageY - y + 'px';
}
//停止事件
function UnbindResize() {
//在支持 releaseCapture 做些东东
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", domResize).unbind("mouseup", UnbindResize)
)
}
//停止事件
function UnbindMove() {
//在支持 releaseCapture 做些东东
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", domMove).unbind("mouseup", UnbindMove)
)
}
}
</script>
