效果圖![在這裏插入圖片描述]()
代碼
<!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;" placeholder="顯示的文本信息" />
<label onmousedown="mousedown(this,event)" style="float:left;cursor:e-resize;max-width:2px;width:2px;background:blue"> </label>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var isResizing = false,
lastDownX = 0;
var docu = null;
function mousedown(doc, e) {
docu = doc;
isResizing = true;
lastDownX = e.clientX;
console.log(e.clientX, e);
}
$(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");
}).on('mouseup', function (e) {
isResizing = false;
});
</script>
</body>
</html>
