Javascript 使用动态变量调整ui可拖放的位置

我试着让一个div落在目标div上时，它会粘在左上方。。当下一个被扔到同一个目标上时，它仍然在左上角，并且偏移了第一个被扔的div的高度

当我了解到在较新版本的jQueryUI中偏移的工作方式有所不同时，我想我已经做到了。。但在这一点上，我不知所措

var offsetValue = Number(0);
var cardHeight = parseInt($(".card").height());
$(document).ready(function() {
    $(function() {
        $('.card').draggable({
            revert: true,
            disabled: false
        });
        $('.target').droppable({
            hoverClass: 'hovered',
            drop: function(event, ui) {
                if (ui.draggable.attr('id') == $(this).attr('id').substr(0, 7)) {
                    totalAttempts++;
                    ui.draggable.draggable('option', 'revert', false);
                    ui.draggable.position({
                        of: $(this),
                        my: 'left top',
                        at: 'left top+offsetValue',
                        collision:'none'
                    });
                    offsetValue = offsetValue+cardHeight;

这不可能吗

$（'endGame'）.hide（）；
var=3；
var=0；
var offsetValue=编号（0）；
var cardheath=parseInt（$（“.card”）.height（）；
$（文档）.ready（函数（）{
$（函数（）{
$（'.card'）。可拖动({
回复：对，
禁用：false
});
$（'.target'）。可拖放({
hoverClass:“悬停”，
drop：函数（事件、用户界面）{
if（ui.draggable.attr（'id'）==$（this.attr（'id'）.substr（0,7））{
totals++；
ui.draggable.draggable（'option'，'revert'，false）；
ui.draggable.position({
其中：$（本），
我的‘左上’，
在“左上角+偏移值”处，
碰撞：“无”
});
offsetValue=offsetValue+卡片高度；
console.log（offsetValue）；
//$（this.removeClass（'target'）；
//$（this.addClass（'targetDisabled'）；
ui.draggable.removeClass（'card'）；
ui.draggable.addClass（'cardCorrect'）；
ui.draggable.draggable（'disable'）；
如果（totalAttempts==totalCards）{
console.log（“完成！”）；
$（“#尾声”）.show（）；
$（“#endGame”）.removeClass（'endDisabled'）；
$（“#endGame”）.addClass（'endEnabled'）；
}
}
}
});
var randomDivs=$（“div.card”）.get（）.sort（函数（））{
返回Math.round（Math.random（））-0.5；
});
$（randomDivs）.appendTo（randomDivs[0].parentNode.show（）；
});
});
#包装器{
宽度：892px；
保证金：0自动
}
.card、.cardCorrect、.tdTargets、.target、.targetDisabled{
宽度：280px；/*可能的最大值：384px*/
}
.card、.cardCorrect{
高度：50px；
}
.tdTargets、.target{
高度：550px；
}
.卡片{
背景色：#c8e7d6；
填充：3倍；
利润率：10px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
光标：移动；
垂直对齐：顶部；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px
}
.cardCorrect{
背景色：透明；
填充：3倍；
利润率：10px；
-webkit用户选择：文本；
-moz用户选择：文本；
-ms用户选择：文本；
用户选择：文本；
游标：默认值
}
#actTab{
边界塌陷：塌陷
}
#actTab td{
垂直对齐：顶部；
边框：1px实心#000；
文本对齐：左对齐；
填充：4px
}
#actTab th{
垂直对齐：顶部；
边框：1px实心#000；
文本对齐：居中；
颜色：#fff；
背景色：#2b6a47；
填充：4px；
字号：400
}
.TDL标签{
宽度：70像素
}
.目标{
边框：1件带点#000；
填充：3件
}
.盘旋{
背景：#eeecdc
}
.targetDisabled{
边框：1px点#fff；
填充：3件
}
#游戏桌{
浮动：左；
}
#选择权{
浮动：对；
}
#端包装{
利润率：10px0；
高度：50px；
文本对齐：居中；
字体大小：粗体；
字体大小：20px；
}
.endDisabled{
颜色：#fff；
}
.endEnabled{
颜色：#000；
文本对齐：居中；
字体大小：粗体；
字体大小：20px；
}

标签A
标签B
标签C
选择1
选择2
选择3
完成
问题可能在于CSS在每个元素的底部添加更多的边距

.card, .cardCorrect, .tdTargets, .target, .targetDisabled {
        width:280px; /*Largest Possible: 384px*/
    margin-bottom:25px;
    }