Resize a div on border drag and drop without adding extra markup

后端未结

关注

 3  1334

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 with

相关标签:

3条回答

清酒与你

2020-11-30 00:27

It is certainly possible to do this without an extra div. Use css and :after to create the border and change the cursor. Use MouseEvent.offsetX to determine whether to process a click in the element.

In your example, you want a click on the main div, but only on the first 4 pixels. You can do that by checking for e.offsetX < 4 in your click handler:

const BORDER_SIZE = 4;
const panel = document.getElementById("right_panel");

let m_pos;
function resize(e){
  const dx = m_pos - e.x;
  m_pos = e.x;
  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}

panel.addEventListener("mousedown", function(e){
  if (e.offsetX < BORDER_SIZE) {
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
  }
}, false);

document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}

#right_panel:after {
 content: " ";
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

<body>
    <div id="right_panel"></div>
</body>

0 讨论(0)

梦如初夏

2020-11-30 00:40

Without jQuery:

<head>
    <style>
        body {
            font-family: Helvetica, Arial;
            font-size: 12px;
        }

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

    </style>
</head>

<body>

    <div id="container">
        <div id="left_panel"> left content! </div>
        <div id="right_panel">
            <div id="drag"></div> right content!
        </div>
    </div>

    <script>
        var isResizing = false,
            lastDownX = 0;

        (function() {
            var container = document.getElementById("container"),
                left = document.getElementById("left_panel"),
                right = document.getElementById("right_panel"),
                handle = document.getElementById("drag");

            handle.onmousedown = function(e) {
                isResizing = true;
                lastDownX = e.clientX;
            };

            document.onmousemove = function(e) {
                // we don't want to do anything if we aren't resizing.
                if (!isResizing) {
                    return;
                }

                var offsetRight = container.clientWidth - (e.clientX - container.offsetLeft);

                left.style.right = offsetRight + "px"; 
                right.style.width = offsetRight + "px"; 
            }

            document.onmouseup = function(e) {
                // stop resizing
                isResizing = false;
            }
        })();


    </script>

</body>

0 讨论(0)

星月不相逢

2020-11-30 00:51

i hope it may help you

http://jsfiddle.net/T4St6/82/

<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;
    });
});

0 讨论(0)