All geek questions in one place

Resize a div while dragging

I have an absolute positional sidebar, and I need to change its width by dragging this border. Also I need to change the cursor on the border. Can this be done without adding another div to drag and drop?

Here is the markup: http://jsfiddle.net/kxr96dzg/

HTML

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

CSS

 #right_panel { position: absolute; border-left: solid 3px #ccc; width: 100px; height: 100%; right: 0; background-color: #f0f0f0; }

I do not need a complete solution. A Yes (with reference to documentation) / No response. I don't need an answer with a div helper. I already have http://jsfiddle.net/kxr96dzg/1/

+5
source share
2 answers

Hope this helps 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; }); });
+14
source

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>
+1
source

Source: https://habr.com/ru/post/1204159/

More articles:


All Articles