Почему добавление helper: clone; к этому перетаскиваемому элементу пользовательского интерфейса предотвратить его перетаскивание?

Все, что я хочу, это иметь <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;
}

ЯВАСКРИПТ:

$(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> "имеет" box-shadow в виде псевдоэлемента, чтобы тень появлялась над дочерними элементами.

Красное поле — до того, как его можно было перетаскивать с помощью jQuery-UI — появляется под тенью, как и ожидалось. Однако, если сделать этот элемент перетаскиваемым, он появится над тенью. Перетаскивание красного прямоугольника в этом состоянии работает должным образом.

Почему, если сделать элемент перетаскиваемым, он окажется перед тенью?

Кроме того, присвоение красному прямоугольнику значения helper: "clone" помещает его обратно под тень, но предотвращает его перетаскивание.

Любые идеи, как это исправить?


html jquery draggable pseudo-element jquery-ui
person Dustin Paluch    schedule 17.03.2013    source источник
comment
Возможно, это связано с абсолютной позицией в .shadowed:before. Я удалил это, и хотя это изменило форматирование, оно снова включило перетаскивание. Пожалуйста, опубликуйте решение, когда решите. Мне любопытно.   -  person monkeyhouse    schedule 18.03.2013

Ответы (1)


arrow_upward
2
arrow_downward

Таким образом, наложение тени блока поверх элементов делает блок ниже недоступным для кликов.

Я обновил пример jsfidle, чтобы прояснить это, добавив еще один div и сделав еще один мод.

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

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

Возможный способ исправить это — перехватить щелчок, скрыть наложение тени блока, а затем имитировать щелчок, а затем повторно отобразить тень блока, но это кажется немного сложным. Некоторый код для запуска этого подхода находится в связанном примере ниже.

Переход JQuery через элемент

person monkeyhouse    schedule 18.03.2013
comment
Как это для взлома? jsfiddle.net/wk8md Теперь вы можете перетаскивать ящики, так как их ничто не закрывает, но мне все равно нужно добавьте какой-нибудь переход по z-индексу при перетаскивании, чтобы вы не могли видеть тени над красным/синим полем во время перетаскивания. - person Dustin Paluch; 18.03.2013