元素未出现在预期位置 (x)

Question

我想我对两个不同的元素（#tu，#chr_1）做了同样的事情，但由于某些我无法弄清楚的原因，它们的行为不同。

我希望反馈元素与拖动的 window 和目标位于同一位置，以便我可以就地提供一些反馈。

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

此外，#tu 元素显示在 #chr_x 元素下方，尽管其 z-index 更高。

我在这里错过了什么？

                .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 样式即可解决问题。

元素未出现在预期位置 (x)

Element not showing up in expected location (x)

html

javascript

css

jquery

draggable