我想我正在为两个不同的元素(#tu、#chr_1)做同样的事情,但由于某种我无法弄清楚的原因,它们的行为不同。
我希望反馈元素与拖动的窗口和目标位于同一位置,以便我可以就地提供一些反馈。
有趣的是,#chr_1 在 drop: 函数中正确对齐,但 #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);
}
}
});
//...
最佳答案
只需将 position:fixed 添加到 .draggable 样式即可解决问题。
关于javascript - 元素未出现在预期位置 (x),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34391585/