Skip to content

Instantly share code, notes, and snippets.

View michael-lins's full-sized avatar
:octocat:
Senior Ruby/Python Developer

Michael Lins michael-lins

:octocat:
Senior Ruby/Python Developer
View GitHub Profile
@ftes
ftes / _seating_plan.html.haml
Created November 20, 2019 21:26
Drag and drop in CSS grid with rails 6, stimulus and rails-ujs
-# https://johnbeatty.co/2018/03/09/stimulus-js-tutorial-how-do-i-drag-and-drop-items-in-a-list/
.grid--draggable{ 'data-controller': 'seating-plan',
'data-seating-plan-endpoint': endpoint,
'data-action': 'dragstart->seating-plan#onDragStart dragover->seating-plan#onDragOver dragenter->seating-plan#onDragEnter drop->seating-plan#onDrop dragend->seating-plan#onDragEnd' }
- seating_plan.each do |seat|
- if seat[:is_empty]
.grid__item.grid__item--empty{ 'data-row': seat[:row],
'data-col': seat[:col],
style: "grid-row: #{seat[:row]}; grid-column: #{seat[:col]};",
class: ('grid__item--border' if seat[:is_border]) }