在边框拖放上调整div大小 [英] Resize div on border drag and drop
本文介绍了在边框拖放上调整div大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个绝对定位的侧面板，我需要通过拖动这个边框来改变它的宽度。还需要在边框上移动光标。是否可以在不添加用于拖动的另一个div的情况下执行此操作？
I have an absolute positioned side panel and I need to change its width by dragging this border. Also I need to change cursor on border hover. Is it possible to do this without adding another div for dragging?
以下是标记：
http://jsfiddle.net/kxr96dzg/
<body>
<div id="right_panel"></div>
</body>
CSS
CSS
#right_panel {
position: absolute;
border-left: solid 3px #ccc;
width: 100px;
height: 100%;
right: 0;
background-color: #f0f0f0;
}
我不需要一个完整的解决方案。 A是（带文档参考）/没有答案就够了。我不需要一个帮助 div 的答案。我已经有一个 http://jsfiddle.net/kxr96dzg/1/
I don't need a full solution. A Yes (with documentation reference)/No answer is enough. I don't need an answer with a helper div. I already have one http://jsfiddle.net/kxr96dzg/1/
推荐答案
我希望它可以帮助你
<div id="container">
<div id="left_panel"> left content! </div>
<div id="right_panel">
<div id="drag"></div> right content!
</div>
</div>
CSS
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
#left_panel {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 100px;
background: grey;
}
#right_panel {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 200px;
color:#fff;
background: black;
}
#drag {
position: absolute;
left: -4px;
top: 0;
bottom: 0;
width: 8px;
cursor: w-resize;
}
JQUERY
var isResizing = false,
lastDownX = 0;
$(function () {
var container = $('#container'),
left = $('#left_panel'),
right = $('#right_panel'),
handle = $('#drag');
handle.on('mousedown', function (e) {
isResizing = true;
lastDownX = e.clientX;
});
$(document).on('mousemove', function (e) {
// we don't want to do anything if we aren't resizing.
if (!isResizing)
return;
var offsetRight = container.width() - (e.clientX - container.offset().left);
left.css('right', offsetRight);
right.css('width', offsetRight);
}).on('mouseup', function (e) {
// stop resizing
isResizing = false;
});
});
这篇关于在边框拖放上调整div大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
