I think I am doing the same for two different elements (#tu, # chr_1), but they behave differently for some reason, I can not understand.
I want the feedback element to be in the same place as the draggable window, and the goal so that I can give some feedback in place.
Interestingly, # chr_1 aligns correctly in the drop: function, but the #tu element cannot do the same. It vertically aligns just fine, but has a large shift to the right relative to the expected location.
In addition, the #tu element appears below the #chr_x element, although its z-index is much higher.
What am I missing here?
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 (
source share