jQuery UI перетаскиваемый элемент всегда сверху - PullRequest
Новая
       2

jQuery UI перетаскиваемый элемент всегда сверху

8 голосов
/ 10 июня 2011

Мне нужно, чтобы элементы перетаскивались из левой части, чтобы всегда быть сверху. И они появляются, когда я сначала перетаскиваю их из левой области, однако, если я перетащу их в блок 2, а затем решу перетащить в блок 1, элемент, который я перетаскиваю, появится ниже блока 1.

Confused? Вот DEMO того, о чем я говорю.

Да, я добавил zIndex - не помогло.

Ответы [ 2 ]

9 голосов
/ 11 июня 2011

Похоже, вы занимаетесь редактированием.:)

Решение состоит в том, чтобы установить два поля на один и тот же z-индекс, а затем понизить z-индекс родного брата (поле, на котором карта НЕ закончилась), используя событие «start».Событие "stop" должно снова установить их равными.Конечно, самому перетаскиваемому файлу нужен более высокий z-индекс.

Вы также можете попробовать стек * .

РЕДАКТИРОВАТЬ: Рабочий пример. Обратите внимание, что на самом деле это перетаскиваемое событие drop, для которого необходимо снова установить равные z-индексы.

Вам нужно будет внести эти изменения (конечно, в коде пропущены звездочки):

В dragdrop-client.js

// make the new card draggable
    newCard.draggable({
        zIndex: 2500,
        handle: ".card",
        stack: ".card",
        revert: "invalid",
        start: function() {
            $(this).effect("highlight", {}, 1000);
            $(this).css( "cursor","move" );
                **var $par = $(this).parents('.stack');
                if ($par.length == 1) {
                    console.log('in stack');
                    $par.siblings().css('z-index', '400');
                }**
        },
        stop: function() {
            $(this).css("cursor","default");
                $(".stack").css('z-index', '500');
        }
    });

// make the new stack droppable
    newStack.droppable({
        tolerance: "intersect",
        accept: ".card",
        greedy: true,
        drop: function(event, ui) {
            **$(".stack").css('z-index', '500');**
            card = ui.draggable;
            putCardIntoStack(card,stackId);
        }
    });

В dragdrop-client.css

.stack {
    width: 300px;
    border: 1px dashed #ccc;
    background-color: #f5f5f5;
    margin: 10px;
    float:left;
    **z-index:500;**
}
0 голосов
/ 14 февраля 2013

Я делаю то, что two7s_clash рекомендует для моего перетаскивания, когда элементы вставляются динамически. У нас есть несколько элементов, которые вставляются поверх холста, а затем мы хотим перетащить n поверх всего: 

start: function(e) { $('element').css('z-index', -1)}
stop:  function(e) { $('element').css('z-index', 0)}
...