我正在处理一个项目，该项目要求我将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位置，这就是我想要做的，以便它捕捉到顶部。拖动它会将其位置更改为绝对位置，以防止它干扰区域中的其他项目。
理想情况下，解决这个问题的最佳方法是以某种方式将其分离，并在其附着到区域之前将其恢复为其形式。我找不到做那件事的方法。
我试着通过使用偏移和改变定位来修复它，但都不起作用。
顺便说一句，有没有一种更简单的方法可以在react中完成这样的事情？我不知道有什么反应，但如果这能让事情变得不那么令人沮丧，我愿意学习。
尝试通过将项目放回类似于以下的.drag区域来恢复过程：
$(function () {
$(".draggable").draggable();
$(".draggable").resizable();
// Make the area droppable so that you can drop back the items
$('.drag-area').droppable({
accept: ".draggable",
drop: function (e, ui) {
if(!ui.draggable.parents().first().hasClass('drag-area')){
ui.draggable.appendTo($(this)).removeAttr('style');
}
}
});
$("#snaptarget").droppable({
accept: ".draggable",
drop: function (e, ui) { //use add class to add tabs maybe?
var $item = ui.draggable;
$item.appendTo($(this)).removeAttr('style').css({
top: ui.offset.top + "px"
});
},
});
});
https://jsfiddle.net/L932c0wr/7/