我正在做一个项目，要求我将div移到某个区域，让它们调整大小到该区域的大小，然后再捕捉到该区域。
我遇到的问题是，当底部区域的物品从该区域中移出时，它们会在屏幕上“跳跃”，就好像它们在补偿其他区域所占的区域一样。我知道这不是一个很好的描述，所以我有一个JSfiddle。
要复制，请将2项放入右侧区域，然后删除底部的一项。当您将其拿出区域时，当前持有的项目将在屏幕上向上移动。
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) { //use add class to add tabs maybe?
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：https://jsfiddle.net/9pk6zt5a/
问题似乎是每个项目在连接时都计算出其相对于区域的x和y位置，这是我要执行的操作，以使其紧贴顶部。将其拖出会将其位置更改为绝对位置，以防止其干扰该区域中的其他项目。
理想情况下，解决此问题的最佳方法是以某种方式分离它，并在将其连接到该区域之前将其恢复为原来的形式。我找不到办法。
我试图通过使用偏移量并更改位置来对其进行修复，但均无济于事。
作为旁注，是否有一种更简单的方法来完成这样的反应？我不知道有什么反应，但是我愿意学习它是否会减少这种挫败感。