Skip to content

Edoardo Vignati

– Always looking for something awesome –

Menu
  • About me
  • Studies
  • Publications
  • Skills
  • Portfolio
  • Projects
  • Career
  • Blog
  • Travels  
Menu

Sortable list with jQuery (also on mobile)

Posted on 10/09/202026/03/2022 by Edoardo

This is a demo. Drag elements to reoder them.

Demo page here
Download zip here

Video to show how this works on different platforms and devices (browser, mobile on browser, real Android device, simulated Android device):

References:

  • https://github.com/mjsarfatti/nestedSortable
  • http://jsfiddle.net/xorivip215/fxd3tbea/
  • https://github.com/furf/jquery-ui-touch-punch

Buy Me A Coffee


This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

4 thoughts on “Sortable list with jQuery (also on mobile)”

  1. Katrin Konrad says:
    07/02/2022 at 08:12

    Will this really work on mobile devices? I tried it and if I use the developer tools to simulate the mobile version it first seems to work – thats better than before where it only worked on Desktop but not on Mobile-Device-Simulation. Fine.
    BUT: if I activate the touch simulation nothing happens . Actually I have no idea how to test it in reality.

    Reply
    1. Edoardo says:
      07/02/2022 at 09:38

      Hi Katrin and thank you for visiting my blog.
      I uploaded in this post a video showing the demo on different platforms and resolutions.
      I hope this will help you 🙂

      Reply
  2. Katrin says:
    05/04/2022 at 15:33

    Here a late response: I found the reason for my bug: I had just to put the links to touchpunch.js etc at the end of the body of the html-file. (Before I had the links in the html-head.) After that ist worked also perfect for mobile devices 😊. Maybe it’ s because I also hve link to bootstrap and the order of the links and their position is crucial for the functionality. – I hope this comment will help others.
    Thanks for leaving this Sortable-code here!

    Reply
    1. Edoardo says:
      05/04/2022 at 15:35

      Thank you Katrin for this update!

      Reply

Leave a Reply to Edoardo Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Edoardo on [SOLVED] XMLHttpRequest error in Flutter web is a CORS error06/01/2023
  2. Fabi on [SOLVED] XMLHttpRequest error in Flutter web is a CORS error20/12/2022
  3. Edoardo on How to install hplip on Ubuntu28/11/2022
  4. Alex K on How to install hplip on Ubuntu28/11/2022

© 2023 Edoardo Vignati | Powered by Minimalist Blog WordPress Theme