I think I am doing the same for two different elements (#tu, #chr_1) but they behave differently for some reason I cannot figure out.
I want the feedback element to be in the same location as the dragged window and the target so that I can give some feedback in-place.
Interestingly, the #chr_1 properly aligns in the drop: function, but the #tu element fails to do the same. It aligns vertically just fine, but has a large offset to the right in respect to the expected location.
Additionally, the #tu element shows up under the #chr_x element even though 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 (#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);
}
}
});
//...
Merely adding position:fixed to the .draggable style solved the problem.