jquery - 为什么添加 "helper: "clone";"到这个 ui-draggable 元素会阻止它被拖动？

Question

我想要的只是拥有一个<ul>其子项上方出现一个框阴影 <li>元素，并且这些元素可以在 <ul> 内排序.

这是一个jsfiddle ，这是代码:

HTML:

<ul class="shadowed">
    <div class="dragMe"></div>
</ul>

CSS:

.shadowed {
    width: 256px;
    height: 64px;
    margin: 100px;
    background: #777;
}

.shadowed:before { 
    content: "";
    width: 256px; 
    height: 64px;
    position: absolute;
    margin: 100px;
    top: 0; 
    left: 0;
    box-shadow: inset 0px 0px 10px 2px #000;
}

.dragMe {
    width: 64px;
    height: 64px;
    background: red;
}

JavaScript:

$(function() {
    $( ".dragMe" ).draggable({

        /* try dragging the red square, then remove this line and try again. */
        helper: "clone",


        revert: "invalid",
        stack: ".dragMe"
    });

    $( ".shadowed" ).droppable().sortable().disableSelection();   
});

在此示例中，我有一个 <ul>带着 child <li> (红色框)。 <ul> “具有”伪元素形式的盒子阴影，使阴影出现在子元素上。

红色框(在通过 jQuery-UI 可拖动之前)按预期显示在阴影下方。但是，在使该元素可拖动后，它会出现在阴影上方。在此状态下拖动红色框可以正常工作。

为什么使元素可拖动并将其放置在阴影前面？

另外，给红框一个helper: "clone"将其放回阴影下方，但防止其被拖动。

有什么想法可以解决这个问题吗？

Answer 1

因此，元素顶部的框阴影覆盖使得下面的 div 不可点击。

我更新了 jsfidle 示例，通过添加另一个 div 并制作另一个 mod 来清楚地说明这一点

 <div class="dragMe"> </div> 

http://jsfiddle.net/rrETm/4/

解决这个问题的一个可能的方法是拦截点击，隐藏框阴影覆盖然后模拟点击，然后重新显示框阴影，但这似乎有点复杂。下面的链接示例中提供了一些开始使用此方法的代码。

Jquery pass click through element