Currently working on a project that involves moving divs into a designated area, resizing them to fit the area, and then snapping them into place.
Encountering an issue where when bottom items are removed from the area, they seem to "jump" up on the screen as if compensating for the space occupied by other items. For a better understanding, a JSfiddle example is included below.
To replicate the issue, try placing two items in the right area and then removing the bottom one - you'll notice the item you're holding moves upward on the screen once taken out of the area.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Creator</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
</head>
<body>
<div class="drag-area">
<div id="snaptarget" class="ui-widget-header">
</div>
<br style="clear:both">
<div id="draggable" class="draggable ui-widget-content">
<p>A</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p>B</p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
<p>C</p>
</div>
<div id="draggable4" class="draggable ui-widget-content">
<p>D</p>
</div>
<div id="draggable5" class="draggable ui-widget-content">
<p>E</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS:
.drag-area {
min-height: 100vh;
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 150px auto;
}
.draggable {
grid-column: 1;
grid-row: 1;
width: 80px;
height: 80px;
display: inline-block;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p,
.ui-widget-content p {
margin: 0;
}
#snaptarget {
width: 173px;
height: 100vh;
grid-column: 3;
position: relative;
}
jQuery/JS:
$(function() {
$(".draggable").draggable();
$(".draggable").resizable();
$("#snaptarget").droppable({
accept: ".draggable",
drop: function(e, ui) {
var $item = ui.draggable;
$item.appendTo($(this)).css({
margin: 0,
position: "relative",
top: 0 + "px",
left: 0 + "px",
width: $(this).width() + "px"
});
},
out: function(e, ui){
var $item = ui.draggable;
var position = $item.offset();
var x = position.left;
var y = position.top;
$item.css({
position: "absolute",
top: y + "px",
left: x + "px"
});
}
});
});
JSFiddle Example: https://jsfiddle.net/9pk6zt5a/
The issue arises from each item calculating its position relative to the area upon attachment, causing it to snap to the top correctly. However, dragging it out changes its position to absolute to prevent interference with other items in the area.
A potential solution could involve detaching the item and reverting it to its pre-attached state, but this has not been successful thus far. Offset adjustment and position change attempts have also proved ineffective.
On another note, considering React for a more streamlined approach to this process. While unfamiliar with React, willing to explore if it offers a less frustrating solution.