Skip to content

Edoardo Vignati

– Always looking for something awesome –

Menu
  • About me
  • Studies
  • Publications
  • Skills
  • Portfolio
  • Projects
  • Career
  • Blog
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 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
Manage Cookie Consent
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage vendors Read more about these purposes
View preferences
{title} {title} {title}