List items are not draggable in touch screen browsers

Question

I created a puzzle game with image-puzzle-js library but the <li> items do not drag in mobile browsers.

I tried jQuery draggable instead of draggable:true css

        $(li).draggable({
            snap: '#droppable',
            snapMode: 'outer',
            revert: "invalid",
            helper: "clone"
        });

but its not working as expecting

I tried the following with touch punch, but still the issue occurs

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
$('li').draggable();

Does this answer your question? [How to get jQueryUI drag\drop working with touch devices](https://stackoverflow.com/questions/13940421/how-to-get-jqueryui-drag-drop-working-with-touch-devices) — fedesc, Aug 03 '20 at 11:43

Jason · Answer 1 · 2020-08-04T01:48:39.593

Not seeing all of your code (the html and the javascript) you have makes this more difficult but...

From your example above:

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
$('li').draggable();

$('li').draggable(); is not doing anything where you have it now (except possibly displaying on the page. For it to work, it needs to be in a script tag and most likely needs to be set to run once your document has fully loaded.

Try changing to something like this:

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
    $(document).ready(function() {
        $('li').draggable();
    });
</script>

That should tell your page to make your <li> elements draggable once the page is fully loaded.

Once you get that working start to learn about where in your page the script tags should go (In <head>, bottom of <body>, etc), when to use $(document).ready() with jQuery and how to use your browser's developer console to see what's happening as the page loads.

List items are not draggable in touch screen browsers

1 Answers1