Elemento non visualizzato nella posizione prevista (x)

Question

Penso di fare lo stesso per due diversi elementi (#tu, # chr_1) ma si comportano in modo diverso per qualche motivo che non riesco a capire.

Desidero che l'elemento di feedback si trovi nella stessa posizione della finestra trascinata e della destinazione in modo che possa fornire un feedback sul posto.

È interessante notare che il # chr_1 si allinea correttamente nella funzione drop: ma l'elemento #tu non riesce a fare lo stesso. Si allinea verticalmente bene, ma ha un ampio offset a destra rispetto alla posizione prevista.

Inoltre, l'elemento #tu si presenta sotto l'elemento #chr_x anche se il suo z-index è molto più alto.

Cosa mi manca qui?

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

aggiungendo Semplicemente position: fixed allo stile .draggable risolto il problema.