How to make row of DIVs resizable with jQuery
Question
I'm working on a scheduling widget concept. The basic idea is to have a row of DIVs for each day of the week. Each row has a fixed number of time periods represented by DIVs. I want to be able to resize each DIV by dragging a handle on the left hand side. The leftmost DIV cannot be dragged, but it resizes depending on the resizing of the DIV to its right. This continues down the row, ie, the DIV to the left is resized automatically when the DIV to the right is resized. I'm using the Resizable widget in jQuery UI for the basic resize function.
I have prepared an example fiddle at: https://jsfiddle.net/profnimrod/rpzyv0nd/4/
For some reason the draggable handle on the left hand side of each DIV (other than the first one) is not moving as I would expect.
The Fontawesome icon inside each DIV (other than the first one), which I'd like to use as the resize handle is also not displaying.
Any ideas on how to fix these two issues.
Note that the there is a canvas element behind the DIV containing the row. The intent here is that I will be adding graphical elements behind the rows at somepoint (the row DIVs will be transparent).
The code I'm starting with (available at the Fiddle) is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schedule test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-6jHF7Z3XI3fF4XZixAuSu0gGKrXwoX/w3uFPxC56OtjChio7wtTGJWRW53Nhx6Ev" crossorigin="anonymous">
<style>
#container { width: 600px; height: 300px; }
#resizable1 { width: 150px; height: 50px; display:inline; float:left;}
#resizable2 { width: 150px; height: 50px; display:inline; float:left;}
#resizable3 { width: 150px; height: 50px; display:inline; float:left;}
#resizable4 { width: 142px; height: 50px; display:inline; float:left;}
#resizable1, #resizable2, #resizable3, #resizable4, #container { padding: 0em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable2" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable1").width($("#resizable1").width() + 50);
}
else {
$("#resizable1").width($("#resizable1").width() - 50);
}
}
});
$( "#resizable3" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable2").width($("#resizable2").width() + 50);
}
else {
$("#resizable2").width($("#resizable2").width() - 50);
}
}
});
$( "#resizable4" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable3").width($("#resizable3").width() + 50);
}
else {
$("#resizable3").width($("#resizable3").width() - 50);
}
}
});
});
</script>
</head>
<body>
<div class="scheduleWrapper">
<div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
<div id="container" class="ui-widget-content">
<div id="resizable1" class="ui-state-active">
</div>
<div id="resizable2" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable3" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable4" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
</div>
</div>
<canvas style="width: 600px; height: 300px;"></canvas>
</div>
</body>
</html>
1 answers
solution1
0 2019-03-07 04:25:39
Consider the following Fiddle: https://jsfiddle.net/Twisty/0r8v47yL/29/
JavaScript
$(function() {
$(".re-size").resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
ui.position.top = 0;
ui.position.left = 0;
ui.size.height = 50;
}
});
});
I added classes to your DIV elements to make it easier to assign. First thing to know about resizing on w is that both left and width of the element will be adjusted. For example if you have:
<div id="resizable2" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
This being set in CSS to 150px width and 50px height, when we drag the handle over, the left will be updated to say 45px and width will be changed to 105px . From a UI perspective this is what the user is expecting the action to do, the left hand side is moved. For your project, this does not work well.
Another issue that this does not address is that widening the element becomes more difficult. You can look at the event and review mouse movement to see if the user is trying to move the mouse closer to the left edge.
More complete example: https://jsfiddle.net/Twisty/0r8v47yL/61/
HTML
<div class="scheduleWrapper">
<div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
<div id="container" class="ui-widget-content">
<div id="resizable1" class="ui-state-active no-re-size item">
</div>
<div id="resizable2" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable3" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable4" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
</div>
</div>
<canvas style="width: 600px; height: 300px;"></canvas>
</div>
JavaScript
$(function() {
$(".re-size").resizable({
handles: "w",
containment: "#container",
resize: function(e, ui) {
//console.log(e);
var x = e.originalEvent.originalEvent.movementX;
ui.position.top = 0;
ui.position.left = 0;
ui.size.height = 50;
if (x < 0) {
console.log(ui.size.width + Math.abs(x));
ui.element.width(ui.size.width + 50);
} else {
ui.size.width = ui.size.width - 50;
}
}
});
});
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.