元素未显示在预期位置(x)

Question

我认为我对两个不同的元素(#tu,#chr_1)做了同样的事情,但是由于某些我无法理解的原因,它们表现不同.

我希望反馈元素与拖动窗口和目标位于同一位置,以便我可以就地提供一些反馈.

有趣的是,#chr_1在drop:function中正确对齐,但#tu元素无法做同样的事情.它垂直对齐就好了,但是相对于预期位置有一个很大的偏移量.

此外,#tu元素显示在#chr_x元素下,即使它的z-index更高.

我在这里错过了什么？

https://jsfiddle.net/2s4c7o3c/

                .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);
                                }
                              }
                            });
            //...

Answer 1

只需将position:fixed添加到.draggable样式就可以解决问题。