Перетаскиваемый элемент скрыт за пределами контейнера

Используя jQuery UI, я пытаюсь создать интерфейс с двумя прокручиваемыми контейнерами, каждый из которых содержит много перетаскиваемых элементов. Пользователь может перетаскивать элемент из одного контейнера в другой.

Отбрасывающая функция не является проблемой. При удалении элемент отделяется и воссоздается в нужном месте под его новым родителем.

Моя проблема в том, что элемент перетаскивания не может отображаться вне его контейнера, когда в контейнере position:relative; применяется, поэтому при перетаскивании элемент исчезает, когда он перемещается за пределы контейнера.

Это поведение по умолчанию имеет смысл, так как обычно пользователь хотел бы перетащить элемент внутри своего контейнера. В качестве обходного решения я решил, что решение будет заключаться в использовании свойства draggable "appendTo", которое, как я думал, перемещает элемент за пределы его контейнера, но, к сожалению, это, похоже, не оказало никакого эффекта.

DOM: (каждое представление прокручивается, и каждый контейнер имеет положение: относительное и такое же большое, как и все элементы)

BODY
    VIEW 1
        CONTAINER
            DRAGGABLE ELEMENTS
    VIEW 2
        CONTAINER
            DRAGGABLE ELEMENTS

JavaScript:

$('div.card').draggable({
    appendTo: 'body',
    scroll: false //stops scrolling container when moved outside boundaries
});

Пожалуйста, см. JSFiddle для упрощенного объяснения проблемы. Я не хотел раздувать пример с помощью droppable code, поэтому это просто иллюстрирует проблему перетаскивания. http://jsfiddle.net/Em7Ak/

Большое спасибо заранее.

Ответы

Ответ 1

Я не уверен, что это исправит вашу точную проблему, но я столкнулся с этим вопросом, ища тот же ответ, и это то, что я нашел.

В параметрах .draggable() перейдите в helper:'clone', чтобы сделать клон элемента автоматически, чтобы его можно было вытащить из контейнера. И используйте appendTo:'body', чтобы поместить его в конец тега <body>. Так что в моем случае мои варианты выглядят примерно так, добавив в revert:'invalid', чтобы вернуть его в spring, если он не был сброшен где-то действительным:

jQuery(".myselector").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});

Ответ 2

У меня была аналогичная проблема несколько месяцев назад.

Мне нужно было использовать автоматическую прокрутку одного большого контейнера из других

Вот мой вопрос для более подробной информации, JqueryUI, перетащить элементы в ячейки прокручиваемого divable div, содержащего большую таблицу

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

Вот мое решение (похоже, JSFiddle сейчас нет, попробуйте позже, если в окнах не отображается код): http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },
        appendTo: 'body',
        containment: 'body',        
        scroll: true,
        helper: function(){ 
            //Hack to append the cartridge to the body (visible above others divs), 
            //but still belonging to the scrollable container  
            $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }    
    });
});​

Ответ 3

используйте вспомогательный ключ "clone" и спрячьте элемент во время его перетаскивания и покажите его снова при остановке.

$(".removalbe-recom").draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    containment: "document",
    zIndex: 10000,
    scroll:false,
    start: function (event, ui) {
    $(this).hide();
    },
    stop: function (event, ui) {
        $(this).show();
    }
});

Ответ 4

Добавить позицию: абсолютный стиль карты:

div.card {
    position:absolute;
    width:100px; height:50px;
    border:1px black solid;
    background-color:orange;
    text-align:center; vertical-align:middle;
}