1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Sortable deck of cards (Button event click does not work)

Hector@cube-usa.com free asked 4 years ago

I tried to add a button inside a card like example on "Sortable deck of cards" of MDB Angular, but onclick event does not work. I think event is lock by dragable function. Is there a way?

Arkadiusz Idzikowski staff commented 4 years ago

We will take a closer look at this problem and let you know what we found.

Which version of the sortable plugin do you use?

Hector@cube-usa.com free commented 4 years ago

mdb-sortable-plugin-7.5.3

Hector@cube-usa.com free commented 4 years ago

Is there an example of the use of [disabledDragElements]="[#template-element-ref]" in sorteable plug in ?

synap pro answered 4 years ago

I'm on version 8.3.0. In addition to the hack mentioned above needed to fix the events bug, I am also having the following issues with this plugin:

1) The order of items in currentList.data and previousList.data remains the same after drag/drop events.

2) Items are enlarged on drag start (or on click, which executes a drag start), making the styles pretty weird for a moment.

Is there a fix in the works for these problems? If not, I'll have to get a refund as the plugin is unusable as-is.

Arkadiusz Idzikowski staff commented 4 years ago

We are currently working on the blocked events. Thank you for reporting these problems, we will take a closer look at that and provide a fix/workaround as soon as possible.

Could you provide some more details about the issue with item order?

The problem with enlarged items is probably caused by the styles of the cards and not by the sortable plugin itself. Did it occur in the other example than 'sortable decks of cards'?

Arkadiusz Idzikowski staff answered 4 years ago

Please try this code:

HTML:

<div class="card-deck" mdbSortableList>
  <!-- Card -->
  <mdb-card mdbSortable [disabledDragElements]="disabledElements">
    <div class="view overlay waves-light" mdbWavesEffect>
      <!-- Card img -->
      <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/16.jpg" alt="Card image cap"></mdb-card-img>
      <a>
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>
    <!--Card content-->
    <mdb-card-body>
      <!--Title-->
      <mdb-card-title>
        <h4>Card Title</h4>
      </mdb-card-title>

      <!--Text-->
      <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
        content.
      </mdb-card-text>

      <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
    </mdb-card-body>
  </mdb-card>

  <!-- Card -->
  <mdb-card mdbSortable [disabledDragElements]="disabledElements">
    <div class="view rgba-white-slight waves-light" mdbWavesEffect>
      <!-- Card img -->
      <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/14.jpg" alt="Card image cap"></mdb-card-img>
      <a>
        <div class="mask"></div>
      </a>
    </div>
    <!--Card content-->
    <mdb-card-body>
      <!--Title-->
      <mdb-card-title>
        <h4>Card Title</h4>
      </mdb-card-title>

      <!--Text-->
      <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
        content.
      </mdb-card-text>

      <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
    </mdb-card-body>
  </mdb-card>

  <!-- Card -->
  <mdb-card mdbSortable [disabledDragElements]="disabledElements">
    <div class="view rgba-white-slight waves-light" mdbWavesEffect>
      <!-- Card img -->
      <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/15.jpg" alt="Card image cap"></mdb-card-img>
      <a>
        <div class="mask"></div>
      </a>
    </div>
    <!--Card content-->
    <mdb-card-body>
      <!--Title-->
      <mdb-card-title>
        <h4>Card Title</h4>
      </mdb-card-title>

      <!--Text-->
      <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
        content.
      </mdb-card-text>

      <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
    </mdb-card-body>
  </mdb-card>
</div>

TS:

  @ViewChildren(MdbBtnDirective, { read: ElementRef }) buttons: QueryList<ElementRef>;
  disabledElements: any[];

  ngAfterViewInit() {
      const buttons = this.buttons.toArray();

      setTimeout(() => {
        this.disabledElements = buttons.map( button => button.nativeElement);
      }, 0);
  }

This example should also work as a workaround for the problem with events.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
sortable angular
About author
Hector@cube-usa.com
55Support score
9Questions 1Answers 0Snippets