Question

当我点击可排序的div元素时，我需要在可排序的顶部显示一个div。 In this jsdfiddle，当我点击可排序时，橙色div应该显示在顶部，而是显示在下面。这段代码出了什么问题？

Javascript：

$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();

$( ".ui-state-default" ).bind( "click", function(e) {
    var menu = $('<div id="menu" style="width:100px;height:100px;background-color:orange;position:absolute" />');
    $( this ).append(menu);
    menu.css('top', e.clientY+'px' );
    menu.css('left', e.clientX+'px' );
});

和HTML：

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
</ul>

Answer 1

这是因为Z-Index，设置z-index：1000;或更多。

Z-index属性设置元素的堆栈顺序。

Answer 2

是的，你必须使用z-index。默认情况下，z-index不会存在。 z-index的值可以从0开始。

我已经更新了你的小提琴，我也添加了

$('#menu').remove();

多次单击时只显示一个橙色div。希望这会帮助你。

jQuery UI：在Sortable之上显示div

2 个答案: