Таблица сортировки с выбыванием - бросьте на пустое тело

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

  • == VISIBLE ==
  • Элемент 1
  • Элемент 2
  • Элемент 3
  • == HIDDEN ==
  • Элемент 4

Когда скрытых элементов нет, в таблице отображается строка с надписью "нет скрытых элементов":

  • == VISIBLE ==
  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4
  • == HIDDEN ==
  • Нет скрытых предметов

Я попытался сделать это с помощью таблицы, в которой есть два тега tbody: один с видимыми элементами, а другой со скрытыми элементами.

Проблема: вы не можете перетаскивать элементы в пустое тело - нет пикселей для перетаскивания. Проблема 2: Отображение сообщения "Нет скрытых элементов".

РЕДАКТИРОВАТЬ

Предметы переоформления в стиле drupal, с ошибками

// too much code to paste here

Этот пример работает в Chrome, так как вы можете перейти к пустому списку, но не в Firefox. См. "Проблему 2" выше, сообщение должно действовать как большая цель отбрасывания.

Источник

2 ответа

Решение

Вот как вы можете достичь этого..

Примените CSS, который увеличит отступ заполнителя, когда скрытый массив пуст.

<tbody data-bind="css: hidden().length === 0 ? 'empty-placeholder' : '', sortable: { data: hidden, options: { handle: '.sortableHandle', cursor: 'move' } }">
    <tr>
        <td data-bind="text: $data" class="sortableHandle"></td>
    </tr>
</tbody>

Добавьте этот CSS в таблицу стилей. Настройте по своему выбору, но сохраняйте отступы или пробел, чтобы событие падения могло забрать цель.

.empty-placeholder{
    display:block;
    padding:10px 0;
    width:100%;
    background:#eee;
}

JSFIddle: http://jsfiddle.net/rahulrulez/pL0t7o1q/9/

Источник

Я нашел другой способ исправить эту проблему. Добавьте наблюдателя к обоим массивам, видимым и скрытым.

var ViewModel = function() {
    var self = this;

    self.visible = ko.observableArray(data.visible);
    self.hidden = ko.observableArray(data.hidden);

    // add an empty array placeholder to give the tbody 
    // a tr to show - else it is empty and zero pixels high
    // and impossible to drop anything onto
    self.hidden.subscribe(function(newVal){

        if (self.hidden().length>1) {
            // remove the [no element placeholder]
            self.hidden.remove(function(item) { return item.label == '##empty##' });
        }

        if (self.hidden().length==0) {
            // push something into the table so the tbody is non-zero height
            self.hidden.push({label: '##empty##'});
        }
    });

}

Затем в HTML я использовал Нет скрытых элементов для отображения сообщения, когда список был пуст.

Примечание: если вы используете этот метод, каждый элемент в списке (или в моем случае каждая строка в таблице) нуждается в пользовательском интерфейсе jQuery "класс сортируемого дескриптора". Помещение в строку таблицы без этого класса сломает это.

Источник
Другие вопросы по тегам