Drag and Drop Sortable list not working for touch screen. I


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>

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.


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
  • 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