jQuery拖动改变元素宽度

效果图jQuery拖动改变元素宽度_第1张图片

代码


<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>

你可能感兴趣的:(JavaScript,HTML,jQuery改变元素宽度)