<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素拖动改变大小</title>
</head>
<body>
<input class="control" value="" style="float:left;padding: 2px; padding-bottom: 0px; 25%;" placeholder="显示的文本信息" />
<label onmousedown="mousedown(this,event)" style="float:left;cursor:e-resize;max-2px;2px;background:blue"> </label>
<div style="border: 1px dashed pink; 70%;height: 200px;display: inline-block;"></div>
<script src="./jquery-1.7.1.min.js"></script>
<script>
var isResizing = false,
lastDownX = 0;
var docu = null;
function mousedown(doc, e) {
docu = doc;
isResizing = true;
lastDownX = e.clientX;
}
let W = $('.control').width();
let Rw = $('div').width();
$(document).on('mousemove', function (e) {
if (!isResizing) return;
var container = $(docu).prev(".control");
var offsetRight = (e.clientX - container.offset().left - container.width());
container.css("width", (container.width() + offsetRight-10) + "px");
$('div').css("width", (Rw-(container.width() + offsetRight-10)+W) + "px");
}).on('mouseup', function (e) {
isResizing = false;
});
</script>
</body>
</html>