jQuery сортируемое перетаскивание - клонирование и другие вопросы

Question

Я хотел бы начать с того, что говорю, что я пытаюсь сделать.В настоящее время я работаю над генератором меню (не знаю, как его назвать), что-то вроде размещения виджетов в WordPress, но для создания меню на веб-сайте.Я пытался сделать это с помощью jQuery и Sortable (я тоже пробовал Draggable и LiveQuery, но это не то, что я ищу), но у меня есть некоторые проблемы:

• пользователю нужно датьвозможность скрытия содержимого элемента, но кнопка скрытия / скрытия его блокирует после копирования элемента
• исходный элемент должен быть клонирован и не перемещен (но с использованием заполнителя - я не могу найти перетаскиваемый с помощьюзаполнитель) без удаления из списка (у меня есть временное решение с добавлением исходного элемента в конец списка, но это не то, чего я хочу достичь)
• элемент должен быть перемещен из одного столбца вдругой (то есть от # column1 до # column2, а не # column1 -> # column1 [то же самое с # column2] и не # column2 -> # column1)

Вот код:

JavaScript:

$(function(){
$('.dragbox').each(function(){
    $(this).find('.dragbox-content').css('display', 'none');
});
$('.dragbox')
.each(function(){
    $(this).hover(function(){
        $(this).find('h2').addClass('collapse');
    }, function(){
        $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
        $(this).find('.configure').css('visibility', 'visible');
    }, function(){
        $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function(){
        $(this).siblings('.dragbox-content').toggle();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
        if (ui.target == event.target) alert("Error!");
        $(ui.item).find('h2').click();
        $(ui.item).clone().appendTo(event.target);
        $(event.target).each(function(){
            $(this).find('.dragbox-content').css('display', 'none');
        });
    },
    remove: function(event, ui) {
        if (ui.target == event.target) alert("Error!");
    }

});
});

и HTML:

<h3>Drag n Drop - menu test</h3>

<div class="column" id="column1">
    <div class="dragbox" id="item1" >
        <h2>category</h2>
        <div class="dragbox-content" >
            Name: <input type="text"/>
        </div>
    </div>
    <div class="dragbox" id="item2" >
        <h2>button</h2>
        <div class="dragbox-content" >
            Text: <input type="text"/><br />
            Link: <input type="text"/>
        </div>
    </div>
    <div class="dragbox" id="item3" >
        <h2>html code</h2>
        <div class="dragbox-content" >
            <textarea></textarea>
        </div>
    </div>
</div>
<div class="column" style="width: 49%;" id="column2" >
</div>

Я знаю, что это может выглядеть хаотично, поэтому есть пример того, что я имею в виду: http://hun7er.pl/poligon/dragndrop/ Код основан наэтот учебник: http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/

КакВы, вероятно, можете видеть, что только содержимое целевого элемента может быть скрыто / скрыто, а иногда при попытке скрыть / показать элемент может быть случайно клонировано.Я искал решение здесь, в stackoverflow и в некоторых других местах (поиск Google), но почти все решения касаются Draggable или LiveQuery, и я не знаю, как использовать там заполнитель (как я уже упоминал, я не мог найти какой-либоучебник / тема / сообщение с Draggable & Placeholder).

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

Заранее благодарен за любую помощь

Answer 1

Чтобы ответить на вопрос, который я считаю наиболее актуальным, приведем пример сортировки jQueryUI с использованием заполнителя .

.

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

Относительно ваших явных вопросов (я добавил классификатор, чтобы помочь определить, что я считаю проблемой) ...

Проблемы с привязкой к событиям : пользователю должна быть предоставлена ​​возможность скрыть содержимое элемента, но кнопка скрытия / скрытия его блокируется после копирования элемента.

Чтобы решить эту проблему, вам необходимо использовать делегирование событий, в идеальном случае ограничивая делегирование событий для ваших столбцов по соображениям производительности. В jQuery есть метод .delegate , который позволяет вам достичь этого. Вот пример кода на основе вашей разметки:

$('.column').delegate('.dragbox h2', 'hover', function() {
    $(this).toggleClass('collapse');
});

$('.column').delegate('.dragbox', 'click', function() {
    $(this).find('.dragbox-content').toggle();
});

Это позволяет вам не беспокоиться о повторном связывании событий при генерации ваших элементов, как описано в документации jQuery на .delegate: " Присоединить обработчик к одному или нескольким событиям для всех элементов которые соответствуют селектору сейчас или в будущем на основе определенного набора корневых элементов."

Клонирование : исходный элемент должен быть клонирован и не перемещен (но с использованием заполнителя - я не могу найти перетаскиваемый с заполнителем) без удаления из списка (у меня есть временное решение с добавлением исходный элемент в конце списка, но это не то, чего я хочу достичь)

Чтобы правильно клонировать элемент, я мог бы предложить изменить парадигму интерфейса, чтобы у вас была кнопка, которая инструктирует пользователя с призывом к действию, например «Нажмите, чтобы добавить» или что-то в этом роде. Было бы лучше иметь кнопку для добавления, вместо того, чтобы беспокоиться о перетаскивании. Вы все еще можете сделать .sortable в column2, но наличие кнопки упростит взаимодействие добавления.

Ограничения удаления : элемент должен быть перемещен из одного столбца в другой (т. Е. Из # column1 в # column2, а не в # column1 -> # column1 [то же самое с # column2] и не # column2 - > # column1)

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