Javascript 元素未显示在预期位置（x）

我想我对两个不同的元素（tu，#chr#u 1）也做了同样的事情，但由于某种原因，它们的行为不同，我无法理解

我希望反馈元素与拖动的窗口和目标位于相同的位置，以便我可以在适当的位置提供一些反馈

有趣的是，#chr#u 1在drop:函数中正确对齐，但是#tu元素没有做到这一点。它在垂直方向上对齐得很好，但相对于预期位置向右偏移较大

此外，#tu元素显示在#chr#x元素下，尽管其z索引要高得多

我错过了什么

.draggable{font size:2em；文本对齐：中间；垂直对齐：中间；宽度：30px；高度：30px；填充：0em；浮动：左侧；边距：0em；背景色：橙色；z索引：10；可见性：可见；}
.Dropable{字体大小：2em；文本对齐：中心；垂直对齐：中间；宽度：30px；高度：30px；填充：0em；浮动：左侧；边距：0em；背景色：橙色；z索引：10；可见性：可见；}
var反馈=$（“#tu”）；
feedback.draggable（）；
写（“+phrase.charAt（i）+”）；
var src=$（“#chr#uu”+i）；
src.draggable（）；
//...
drop：函数（事件、用户界面）{
var ep=$（此）.data（“pos”）；
var fp=$（ui.draggable）.data（“expos”）；
如果（ep==fp）{
数据（$（ui.draggable）[0]，“放置”，true）；
$（ui.draggable.css（“top”、$（this.css（“top”））；
$（ui.draggable.css（“左”），$（this.css（“左”）；
//在这里它起作用（#chr_1），之后元素位于相同的位置。
feedback.css（“top”，$（this.css（“top”）；
feedback.css（“left”，$（this.css（“left”）；
//这里的反馈（#tu）不会出现在预期的位置，
//但是在右边偏移几百像素。
css（“可见性”、“可见”）；
css（“背景色”、“红色”）；
}否则{
$（ui.draggable）.data（“移动”，true）；
}
}
});
//...

仅添加位置：固定到.draggable样式解决了问题。

您能将其放在一个新的位置吗？

                .draggable {font-size: 2em; text-align: center; vertical-align: middle; width: 30px; height: 30px; padding: 0em; float: left; margin: 0em; background-color: orange; z-index: 10; visibility: visible;}

                .droppable {font-size: 2em; text-align: center; vertical-align: middle; width: 30px; height: 30px; padding: 0em; float: left; margin: 0em; background-color: orange; z-index: 10; visibility: visible;}

                <div id="tu" class="draggable" style="visibility:hidden; z-index: 100;"> </div>
                <script>
                    var feedback = $("#tu");
                    feedback.draggable();

                document.write("<div id='chr_"+i+"' class='draggable' style='position:fixed;top:"+y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
                var src = $( "#chr_"+i );
                src.draggable();

            //...
                            drop: function( event, ui ) {
                                var ep = $(this).data("pos");
                                var fp = $(ui.draggable).data("expos");
                                if(ep == fp) {
                                    jQuery.data($(ui.draggable)[0],"placed",true);
                                    $(ui.draggable).css("top",$(this).css("top"));
                                    $(ui.draggable).css("left",$(this).css("left"));
    //Here it works (#chr_1) and the elements are in the same location afterward.
                                    feedback.css("top",$(this).css("top"));
                                    feedback.css("left",$(this).css("left"));
    //Here the feedback (#tu) doesn't occur in the expected location, 
    //but is at a few hundred px offset to the right.
                                    feedback.css("visibility","visible");
                                    feedback.css("background-color","red");
                                } else {
                                    $(ui.draggable).data("moving",true);
                                }
                              }
                            });
            //...