Expected behavior Create a grid of cards from viewModel, that are sortable and indicate a placeholder. (It is important that the sorting acts like the grid (left to right) rather than a list (up to down).

Actual behavior Creates a grid of cards from viewModel that are sortable but there is no placeholder. Sorting works as grid.

Resources (screenshots, code snippets etc.)

Code (cshtml)

<div class="row text-center mb-3">
    <div id="sortGrid" class="col-md-12 d-flex flex-center flex-wrap">

        @foreach (var Card in Model.FavoriteCards)
        {
            <div class="col-md-6 col-lg-4" id="@Card.Reference-col">
                <!--Card-->
                <div class="card mb-3" id=@Card.Reference>
                    <i class="fas fa-star fa-lg amber-text d-flex justify-content-end m-2" id="@Card.Reference star"></i>
                    <h5 class="card-title">@Card.Title</h5>
                    <div class="card-body">
                        <p class="card-text mb-3" style="transform: rotate(0);">
                            @if (string.IsNullOrEmpty(Card.Icon.HRef))
                            {
                                <a asp-controller=@Card.Icon.Controller asp-action=@Card.Icon.Action class="img-circle stretched-link"></a>
                            }
                            else
                            {
                                <a href=@Card.Icon.HRef class="img-circle stretched-link"></a>
                            }
                            <img src=@Card.Icon.ImgSrc />
                        </p>

                        @foreach (var link in Card.TextLinks)
                        {
                            if (string.IsNullOrEmpty(link.HRef))
                            {
                                <a asp-controller=@link.Controller asp-action=@link.Action class="card-link">@link.Text</a>
                            }
                            else
                            {
                                <a href=@link.HRef class="card-link">@link.Text</a>
                            }
                        } <!--END: Link loop-->
                    </div> <!--END: Card Body-->
                </div> <!--END: Card-->
            </div> <!--END: Col-->
        } <!--END: Card Loop-->
    </div>
</div>

JavaScript in cshtml file

$(document).ready(function () {
        // Define Cards from viewModel
        var cards = @Html.Raw(Json.Serialize(Model.Cards));
        var favCards = @Model.FavoriteCards.Count();

        // Initialse Sortable cards with update POST event
          $("#sortGrid").sortable({
            placeholder: "drop-placeholder",
            update: function (event, ui) {
                var ids = $(".ui-sortable-handle .card").toArray().map(x => x.id);
                postData(ids, cards);
            }
        });