Topic: Sortable Placeholder with Cards Grid

PeraLauren free asked 5 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">
                <!--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);
            }
        });

MDBootstrap staff commented 5 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.

FREE CONSULTATION

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

Status

Opened

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