Topic: Drag and Drop Sortable list not working for touch screen. I think it is not supported, yet?!
goldfarbdev pro premium priority asked a year ago
Expected behavior Drag and Drop Sortable list is supposed to work when you drag an element in a sortable list and drop it, the list items are supposed to rearrange to fit the list item in the spot that was dropped.
Actual behavior I notice that mouse enter events do work, but when debugging on a mobile device, there are no touch events. The drop event is recognized, but there really is not a good point of reference to determine where in the list I am to create my own solution.
I'm building an app for mobile devices and it should work. You can drag, but you can not drop. I also tested your demos on mobile and tablet and the drag just does not work at all.
Resources (screenshots, code snippets etc.)
0" mdbSortableContainer class="sortable-list" (itemDrop)="onDrop($event)"> Delete Duplicate Cancel <div class="d-flex align-items-center">
<input
(click)="editExercise(set, i)"
[id]="set.exercise.name + i"
class="btn-check"
formControlName="selectExercise"
name="selectExercise"
mdbRadio
type="radio"
autocomplete="off"
[value]="set"
/>
<label class="w-100"
[for]="set.exercise.name + i" mdbRipple
>
{{set.exercise.name === 'Custom' ? workoutForm.value['customExerciseName'] : set.exercise.name}}
<i class="far fa-edit fa-lg"></i>
<i class="fas fa-arrows-alt draggable-drag-ico"></i>
</label>
</div>
<div class="exerciseMetaData d-flex align-items-right">
<span class="d-inline-block btn-outline-dark" style="border-top:0; border-bottom:0;">
{{set.setCount}}
</span>
<span class="d-inline-block btn-outline-dark" style="border:none;">
{{set.repCount}}
</span>
<span class="exerciseMetaData-breakTime d-inline-block btn-outline-dark w-50"
style="border-top:0; border-bottom:0; border-right:0;">
{{ helperService.convertToMinutes(set.breakTime) }}:
{{helperService.convertToSeconds(set.breakTime) < 10 ? 0 : '' }}{{
helperService.convertToSeconds(set.breakTime)
}}
</span>
</div>
</li>
</ul>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 5.0.0
- Device: Mobile Touch Screen
- Browser: Chrome
- OS: iOs and Android
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented a year ago
This bug is already on our to-do list but we did not find the source of the problem yet. We will update the thread when this problem will be fixed.