[bug] Sorting on phone doesn't work. Works great on desktop.

[martijnhiemstra]

I am using Sortable 1.14.0. I downloaded the min.js file from github and added it to my html5 page.

Describe the bug

When I view my website on my desktop the sorting works fantastic. When I switch to responsive mode in my browser and then make my website the same width as my phone, reload the page then the sorting doesn't work anymore. I can confirm this with my phone. When I view the same page with my phone then the sorting doesn't work. I can drag an element however none of the other elements move. So it works on desktop mode and not n any device that is as narrow as a phone.

To Reproduce

Create a bootstrap 5 modal using the followng code:

<div class="modal fade show" id="sortItemsModal" tabindex="-1" aria-labelledby="sortItemsTitle" aria-modal="true" role="dialog" style="display: block;">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="sortItemsTitle" data-i18n-key="action.sort">Sort</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row" id="sortItemsList">
                        <div class="col-12 sortable-row" data-sort-id="1">
                            <i class="fa fa-sort me-2"></i>
                            Item 1
                        </div>
                    
                        <div class="col-12 sortable-row" data-sort-id="3">
                            <i class="fa fa-sort me-2"></i>
                            Item 2
                        </div>
                    
                        <div class="col-12 sortable-row" data-sort-id="4">
                            <i class="fa fa-sort me-2"></i>
                            Item 3
                        </div>
                    
                        <div class="col-12 sortable-row" data-sort-id="2" draggable="false">
                            <i class="fa fa-sort me-2"></i>
                            Item 4
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="container">
                    <div class="row">
                        <div class="col-6 text-start">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                                <span data-i18n-key="action.close">Close</span>
                            </button>
                        </div>
                        <div class="col-6 text-end">
                            <button type="button" class="btn btn-primary" onclick="saveSort()" id="sort-modal-save">
                                <span data-i18n-key="action.save">Save</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Start the sorting with the following javascript:

let sortItems = document.getElementById('sortItemsList');
    new Sortable(sortItems, {
        animation: 150
    });

Expected behavior

I expect the sorting to work on desktop and on phone.

[Tyler-Petrov]

I've actually had great success with SortableJS on mobile. Have you tried to strip the unnecessary code from your example (I.E. remove bootstrap and/or the modal)? If you still have the error it will at least be easier to reproduce for those trying to help, and if not then pin pointing the problem is easier too