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>

---