Topic: Sortable deck of cards (Button event click does not work)
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?
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 5 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'?
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Arkadiusz Idzikowski staff commented 5 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 5 years ago
mdb-sortable-plugin-7.5.3
Hector@cube-usa.com free commented 5 years ago
Is there an example of the use of [disabledDragElements]="[#template-element-ref]" in sorteable plug in ?