Перемещение или щелкание объектов в списке

Question

Перемещение или щелкание объектов в списке

0

Я пытаюсь создать способ перемещения "глав". Моя проблема в том, что я не могу понять, как это сделать. Если у кого-нибудь из вас есть идея или пример того, как вы это сделали, было бы здорово.

Я думал что-то вроде списка. Где вы можете перетащить или щелкнуть "главы".

как это:

Глава А
- Глава Aa
  - Глава Aaa
  - Глава Aab
- Глава АБ
Глава B
- Глава Bb
Глава C

Дело в том, что если у меня есть кнопка для перемещения вверх и вниз, мне нужны дополнительные кнопки для перехода к главе от А до С.

PS: Проект находится в .cshtml.

Изменение: каждая дочерняя глава имеет значение, которое содержит идентификатор его родителя. При перемещении этот идентификатор изменится, а затем будет сохранен, когда пользователь будет доволен текущим заказом.

Michael Tot Korsgaard 02 окт. 2013, в 21:58

Источник

Теги:

c#

jquery

list

razor

2 ответа

Ещё вопросы

davehale23 · Answer 1 · 2013-10-02T18-32-00.000Z

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

<ul class="sortable">
  <li class="ui-state-default">Chapter 1</li>
  <li class="ui-state-default">Chapter 2</li>
  <li class="ui-state-default">Chapter 3
      <ul class="sortable">
          <li class="ui-state-default">Chapter 3a</li>   
          <li class="ui-state-default">Chapter 3b</li>
          <li class="ui-state-default">Chapter 3c</li>
      </ul>          
  </li>
  <li class="ui-state-default">Chapter 4
    <ul class="sortable">
          <li class="ui-state-default">Chapter 4a</li>   
          <li class="ui-state-default">Chapter 4b</li>
          <li class="ui-state-default">Chapter 4c</li>
      </ul> 
 </li>
  <li class="ui-state-default">Chapter 5</li>
</ul>

$(function() {
    $( ".sortable" ).sortable({
      revert: true,
      connectWith: ".sortable"
    });

    $( "ul, li" ).disableSelection();
  });

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

rae1 · Answer 2 · 2013-10-02T18-19-00.000Z

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

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

Надеюсь, поможет!