Gaps between list items

[tfantina]

First, thank you for this amazing library.

I am working on a calendar that would allow schedule blocks to be dragged around to different times throughout the day. I'm wondering if this is possible with Sortable? The below example is what I am looking for:

The above was actually made with Sortable, I've done some preliminary work writing a "Timeline" plugin and I'd be willing to develop it further if this is something that can't already be done some other way and if you are interested in having plugin support for this.

The gist of what I've written is based on CSS grids:

drop(params) {
      const grid_rows = window.getComputedStyle(this.sortable.el).gridTemplateRows
      const row_height = parseInt(grid_rows.split("px")[0])
      const height = parseInt(window.getComputedStyle(this.sortable.el).height.replace("px", ""))
      const drop_y = params.originalEvent.offsetY
      
     gridPosition = Math.ceil(drop_y / row_height)
}

From there I return grid_position. In the the Sortable event I use onEnd to update the item's evt.item.style.gridRow = evt.gridPosition.

I realize this is very half baked and it dosen't account for even most functionality but I wanted to run it by the maintainers before I started working on a PR for a plugin like this.

[Beyondo]

Hi! You don't need gaps. You just need to create hidden elements. Add a few elements with style.visibility = "hidden"; then remove them accordingly to your needs when you need to fill out their places. Maybe call them "placeholders" and your PR would be titled "placeholder feature". I think it is much easier and you wouldn't need to compute anything yourself.

Example behavior: Total 10 items = Initialize with 5 placeholders, and 5 elements, and now you have automatic gaps up to the size of 4 items.

Just make sure to make the placeholders unclickable.

[tfantina]

Thanks @Beyondo I'm refactoring a few of our backend functions this week I'll be looping around this next week, I'll let you know how it goes.

[tfantina]

@Beyondo thanks for the tip, it took me a while to come back to this (the feature was on the back burner for a bit) but I've implemented your suggestion. I'm not sure what you mean about changing the element visibility to hidden. I've added several placeholder elements, eg. <div class="placeholder"> and set Sortable's filter param to filter: '.placeholder'. Then I just keep track of the sequence in which items are scheduled and render div's with the placeholder class when an empty row is called for.

My only issue is that this seems to lead to unreliable indexes when dragging, evt.oldIndex and evt.newIndex seems to be disregarding the filter'ed items, which I guess makes sense but it's causing issues when dragging items around on the schedule.