jQuery: использование кнопок переключения для перемещения элементов между несколькими списками - PullRequest
Новая
       31

jQuery: использование кнопок переключения для перемещения элементов между несколькими списками

0 голосов
/ 21 октября 2011

У меня три списка, у каждого элемента есть панель инструментов с кнопками. Списки поставлены, живут и закреплены. Я пытаюсь использовать кнопки переключения для перемещения элементов между списками. Как вы можете видеть из примера jsfiddle ниже, у меня есть кнопки, перемещающие элементы, но я столкнулся с двумя проблемами, с которыми я надеялся получить некоторую помощь. Я - визуальный ученик, я просмотрел пример Stackoverflow и Google для примера без удачи.

Примечания - Кнопки редактирования и корзины не перемещают элементы. Я буду выполнять вызов ajax внутри каждого действия переключения, чтобы зафиксировать каждое изменение, я отметил это в своем файле js.

Рабочий пример: http://jsfiddle.net/RuRdZ/3/

Проблемы :

1 - Когда вы нажимаете на кнопку, например «Make Live» в поэтапном списке, элемент должным образом перемещается в живой список, но кнопки на этом элементе становятся недоступными - после перемещения я не могу удалить элемент или сделать это снова поставлено. Это будет проблемой, потому что моя цель - не обновлять страницу.

2 - Опять же, при перемещении элемента из списка в список я пытался выяснить, как сделать так, чтобы нужные кнопки исчезали / появлялись. Например, если я сделаю поэтапный элемент живым, когда этот элемент перемещается, я бы хотел скрыть кнопку «сделать живой» и показать кнопку «этап». Я пробовал несколько вещей, но я не думаю, что я использую правильный селектор. В каждом заголовке я перечислил соответствующие кнопки, которые должны появляться в каждом списке.

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 21 октября 2011

не используйте клон, добавление существующего элемента к другому удаляет его из исходного элемента контейнера - это решает проблему с событиями кнопок

выполняет все действия в одном обработчике - тогда вы получите контроль над кнопкамипоказать или скрыть их соответственно

например 

function doAction($element, buttonsToHide, $containerAppendTo) {
  $containerAppendTo.append(element);
  //loop over all buttons inside clicked li
  $('.fg-buttonset', $element).each(function(){
    $currBtn = $(this);

    $currBtn.toggle(!$currBtn.hasClass(buttonsToHide)); //show|hide if needed
  });
}

  $(".doStage").click(function() {
    var $el = $(this).closest('li');
    doAction($el, 'stagedButton', $('#test-list3'));
  });
...