@kvarel

Как реализовать перемещение ячеек таблицы через Drag and drop?

Делаю аналог планограммы магазина на django.
Дана модель магазина, в которой сохраняются параметры длины и ширины.
Дана модель стеллажа так же с параметрами длины и ширины.
На странице магазина должна отображаться схема расположения стеллажей в магазине.

Примитивное решение, которое реализовано:
1) В модели стеллажа реализовано сохранение координат начальной позиции, его направление, длина и ширина.
2) При формировании контекста к странице создается двумерный список - сетка магазина, заполняется экземплярами специального класса, обозначающее пустое место.
3) Далее циклом перебираются все стеллажи. Берутся координаты начала стеллажа, в списке по этим координатам помещается экземпляр класса стеллажа. Далее исходя из направления стеллажа, его ширины и длины, клетки, которые стеллаж покрывает, заменяют значение класса пустого места на значение None.
4) Далее при отрисовке этого списка в шаблоне создается таблица, в которой берется каждая ячейка, проверяется на наличие объекта в ней и атрибутами colspan и rowspan задаются размеры стеллажа в таблице.

<table>
   {% for col in table %}
      <tr>
         {% for j in col %}
            <td colspan="{{ j.height }}" rowspan="{{ j.width }}">{{ j.pk }}</td>
         {% endfor %}
      </tr>
   {% endfor %}
</table>


class ShopDetail:
   UNIT = decimal.Decimal(0.05)

   def __init__(self, shop):
      self.shop = shop
      self.pole = self.get_pole()

   def get_pole(self):
      pole = self.init_pole()
      return self.init_placement(pole)

   def init_pole(self):
      cols = int(self.shop.width / self.UNIT)
      rows = int(self.shop.height / self.UNIT)
      return [[EmptyRack() for _ in range(cols)] for _ in range(rows)]

   def init_placement(self, pole):
      racks = self.shop.rack_set.all()

      for rack in racks:
         rack_width = int(rack.width / self.UNIT)
         rack_height = int(rack.height / self.UNIT)
         for row in range(rack.coord_y, rack.coord_y + rack_height + 1):
            for col in range(rack.coord_x, rack.coord_x + rack_width + 1):
               pole[row][col] = None
         pole[rack.coord_y][rack.coord_x] = rack

      return pole


Все работает, но на практике при больших размерах сетки и большом количестве стеллажей очень неудобно их расставлять.
1) Либо дать пользователю возможность ввести координаты клетки начала стеллажа
2) Дать реализовать функционал по перемещению стеллажа во всех направлениях на 1 или 5, 10 клеток.

Цель - дать возможность перетаскивать стеллажи удерживанием кнопки мыши.
Только при реализации выше очень непонятно, как отлавливать адрес получателя стеллажа. Таблица получается не прямоугольная, в ней ячейки, которые занимает стеллаж объединены.
Посоветуйте материал, как такое реализовать?
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы