Несколько сортируемых объектов jQueryUI в одной строке - PullRequest
Новая
       7

Несколько сортируемых объектов jQueryUI в одной строке

0 голосов
/ 12 сентября 2018

После исчерпывающего поиска, я надеюсь, что кто-то в StackOverflow сможет указать мне правильное направление.

Сценарий :

В настоящее время я использую сортировку jQueryUI для создания списков людей и их посещаемости по дням в неделю. У меня есть несколько divs связанных сортируемых <ui >, и это работает очень хорошо.

В моем примере я перечисляю сотрудников в разных группах. Они представлены <li> в сортируемых блоках. Они должны быть:

  • полная ширина для представления полной занятости
  • 60% ширины в течение 3 дней в неделю
  • 40% на неполный рабочий день 2 дня в неделю

Пока что это не проблема с CSS, просто помечая <li> как 100%, 60% и 40% ширины соответственно, и все выглядит правильно.

Проблема

Проблема заключается в том, что эти блоки должны быть в состоянии разрешить позиции 40% + 60% (или наоборот) неполный рабочий день сидеть в одном ряду, чтобы указать, что занят полный рабочий день.

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

Цель состоит в том, чтобы иметь возможность превратить это: 

| Jane                |
| John      |
| Joe   |

В это: 

| Jane                |
| John      | | Joe   |

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

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

Заранее спасибо.

РЕДАКТИРОВАТЬ - скрипка: https://jsfiddle.net/xpvt214o/783063/

1 Ответ

0 голосов
/ 12 сентября 2018

Вы захотите добавить еще немного структуры в ваш HTML, чтобы при перемещении элементов вы действительно просто перемещали контейнер.

Например: https://jsfiddle.net/Twisty/0hkn2Lbu/

HTML 

<h4 style="display:inline">Monday</h4>
<ul id="class_1" class="list-unstyled connectedSortable ui-sortable">
  <li class="panel ui-sortable-handle" id="emp_1801">
    <div class="emp-time">
      <span class="time-block dpw_5">&nbsp;</span>
      <span class="name-label">Allan</span>
    </div>
  </li>
  <li class="panel ui-sortable-handle" id="emp_1822">
    <div class="emp-time">
      <span class="time-block dpw_5">&nbsp;</span>
      <span class="name-label">Becca</span>
    </div>
  </li>
</ul>
<hr>
<h4 style="display:inline">Tuesday</h4>
<ul id="class_2" class="list-unstyled connectedSortable ui-sortable">
  <li class="panel ui-sortable-handle" id="emp_1811">
    <div class="emp-time">
      <span class="time-block dpw_3">&nbsp;</span>
      <span class="name-label">Charlie</span>
    </div>
  </li>
  <li class="panel ui-sortable-handle" id="emp_1823">
    <div class="emp-time">
      <span class="time-block dpw_2">&nbsp;</span>
      <span class="name-label">Diane</span>
    </div>
  </li>
</ul>

Это также означает добавление большего количества CSS для стилизации, как вы хотите.Я наложу метку поверх блока.

CSS 

.emp-time {
  position: relative;
  width: 100%;
}

.name-label {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  padding-left: 5px;
}

.time-block {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}

.dpw_5 {
  width: 100%;
  background-color: #fff;
}

.dpw_3 {
  width: 60%;
  background-color: #ccc;
}

.dpw_2 {
  width: 40%;
  background-color: #999;
}

Это упрощает обращение к большему количеству элементов.В ваш JavaScript не было внесено никаких изменений, за исключением его переноса.

JavaScript 

$(function() {
  var panelList = $("#class_1, #class_2, #class_3, #class_4, #class_5, #class_6, #class_7, #class_8, #class_12");

  panelList.sortable({
    connectWith: ".connectedSortable",
    forcePlaceholderSize: true,
    placeholder: "panel sortable-placeholder",
    stop: function(event, ui) {
      var class_obj = {};
      var class_id = 0;
      panelList.each(function(class_index, class_element) {
        class_id = $(class_element).attr("id").slice(6);
        class_obj[class_id] = [];
        $("#class_" + class_id + " li").each(function(child_index, child_element) {
          class_obj[class_id].push($(child_element).attr("id").slice(6));
        })
      });
      $.post('enrollment_ajax.php', {
        action: "saveData",
        location_id: "'.$location_id.'",
        month: "'.$month_time.'",
        data: JSON.stringify(class_obj)
      });
    }
  });
});

Надеюсь, что это поможет.

Теперь, чтобы разрешитьони могут быть встроены, вы можете рассмотреть это:

https://jqueryui.com/sortable/#display-grid

Но я подозреваю, что это не будет работать для вас, как вы намерены.Похоже, вам нужно больше сценария перетаскивания.Если наименьшее количество часов, которое может работать сотрудник, составляет 2 часа из 10-часовой смены, это будет 20%, 4 часа: 40%, 6 часов: 60% и 10 часов: 100%.

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

Пример: 

+ -- -- -- -- -- +
| A (5)          |
+ -- -- -- -- -- +
| B (3)   | C (2)|
+ -- -- -- -- -- +

Каждый контейнер является областью удаления, но он будет проверятьКаждое удаление и допускается только до значения 5. Вы можете сделать это также с помощью Sortable, где каждый день является сортируемым списком, и он проверяет обновления, чтобы убедиться, что мы не переполнили его.Это немного сложнее сделать.

Я обновлю случай с лучшим примером.

Обновление 1

https://jsfiddle.net/Twisty/0hkn2Lbu/14/

Здесь вы можете видеть сортировку списков.

...