CODEWITHSUNDEEP
jqueryhtmljquery-uidraggablepseudo-element
Dustin Paluch
Dustin Paluch

Reputation: 93

Why does adding "helper: "clone";" to this ui-draggable element prevent it from being dragged?

All I want is to have a <ul> with a box-shadow that appears over it's child <li> elements, and for those elements to be sortable within the <ul>.

Here's a jsfiddle, and here's the code:

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();   
});

In this example, I have a <ul> with a child <li> (the red box). The <ul> "has" a box-shadow in the form of a pseudo-element to cause the shadow to appear over the child elements.

The red box—before being made draggable via jQuery-UI—appears beneath the shadow as expected. However, upon making this element draggable, it appears above the shadow. Dragging the red box in this state works as expected.

Why does making the element draggable place it in front of the shadow?

Additionally, giving the red box a helper: "clone" puts it back beneath the shadow, but prevents it from being dragged.

Any ideas how to fix this?

Upvotes: 2

Views: 4192

Answers (1)

monkeyhouse
monkeyhouse

Reputation: 2896

So the box shadow overlay on top of the elements is making the div below unclickable.

I updated the jsfidle example to make this clear by adding another div, and making another mod too

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

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

A possible way to remedy this is by intercepting the click, hiding the box shadow overlay and then simulating the click, and then re-showing the box shadow, but it seems a bit complicated. Some code to start on this approach is in the linked example below.

Jquery pass click through element

Upvotes: 2

Related Questions