Как снова показать элемент, родитель которого был переключен - PullRequest
Новая
       3

Как снова показать элемент, родитель которого был переключен

1 голос
/ 12 марта 2012

У меня есть список элементов.Дитя этого списка являются перетаскиваемыми.Также у меня есть div.Если вы наведете курсор на этот div, я покажу мой <ul>.. Если вы перетащите элемент, <ul> исчезнет.

Вот небольшая демонстрация: http://jsfiddle.net/HuEGa/7/

Как вывидите, это работает.Это не выглядит красиво, но работает.

Как я могу получить анимацию, которая противоположна слайду, который я уже получил?Если я что-то перетаскиваю, я не хочу просто скрывать контейнер, а просто сдвинуть его.

Я наткнулся на $('#elementsContainer').animate({width: 'toggle'});, но тогда я не знаю, как сделать так, чтобы мой перетаскиваемый элемент отображалсяпосле закрытия контейнера.

Перетаскиваемый элемент, кажется, наследует css / состояния от родителя.Вот почему я устанавливаю видимость для события перетаскивания в моем примере.

Есть идеи?Мне нужно было бы вернуть слайд или что-то в этом роде.

Редактировать: (дальнейшее объяснение)

В этом примере я делаю $('#elementsContainer').css('visibility', 'hidden');, поэтому, если вы начнете перетаскивать <li>контейнер исчезнет.Это также приводит к исчезновению ребенка.Чтобы предотвратить это, я возвращаю перетаскиваемому элементу значение «видимый» $('.ui-draggable-dragging').css('visibility', 'visible');

Поскольку установка контейнера-невидимки выглядит ужасно, я бы хотел добавить анимацию.Вы можете попробовать это и заменить строку некоторой анимационной логикой.Тогда вы увидите, что если контейнер скрыт, перетаскиваемый объект также будет скрыт.Теперь мне нужно снова сделать его видимым, и здесь возникает проблема.Я не могу реализовать красивую анимацию скрытия и снова отобразить перетаскиваемый элемент, как я это делал в примере.

1 Ответ

1 голос
/ 12 марта 2012

Вы можете попробовать что-то вроде 

$(document).ready(function(e) {
$(".draggable li").draggable({
    //connectToSortable: ".sortable",
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body',
    start: function() {
        $('#elementsContainer').hide('slide', {
            direction: "left"
        }, 500);
    }
});

скрипка http://jsfiddle.net/HuEGa/8/

...