2

我想要的只是<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>一个孩子<li>（红色框）。“<ul>具有”一个伪元素形式的盒子阴影，以使阴影出现在子元素上。

红框——在通过 jQuery-UI 可拖动之前——按预期出现在阴影下方。但是，在使该元素可拖动时，它会出现在阴影上方。在此状态下拖动红色框按预期工作。

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

此外，给红色框 ahelper: "clone"将其放回阴影下方，但防止它被拖动。

任何想法如何解决这一问题？

4

1 回答 1

2

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

我更新了 jsfidle 示例，通过添加另一个 div 和制作另一个 mod 来明确这一点

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

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

一种可能的补救方法是拦截点击，隐藏框阴影覆盖然后模拟点击，然后重新显示框阴影，但看起来有点复杂。开始使用这种方法的一些代码在下面的链接示例中。

Jquery通过点击元素

于 2013-03-18T03:51:56.063 回答