Topic: Sortable Placeholder with Cards Grid

PeraLauren free asked 4 years ago

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">
                <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>
                                <a href=@Card.Icon.HRef class="img-circle stretched-link"></a>
                            <img src=@Card.Icon.ImgSrc />

                        @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>
                                <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-->

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
            placeholder: "drop-placeholder",
            update: function (event, ui) {
                var ids = $(".ui-sortable-handle .card").toArray().map(x =>;
                postData(ids, cards);

MDBootstrap staff commented 4 years ago

Hi, I am here to help you. Your intention is for me to fix your implementation? Is there any issue with MDB component?

Best Regards, Piotr

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.10
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No