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>个孩子<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

为什么要添加“helper：”clone“;”这个ui-draggable元素可以阻止它被拖动？

1 个答案: