Touch Functionality for Jquery UI Components

Submitted by leopathu on Sun, 05/08/2022 - 13:31
jquery

jQuery UI library have lots of features within it like Draggable, Droppable, Sortable, Accordian, Slider etc.., but unfortunately is not supporting touch effect (event). It is the major issue in the current mobile world. Lots of libraries are available to solve the problem, one of the best library is jQuery UI Touch Punch, Let see how to get the Touch Functionality in jQuery UI with the Touch Punch Library,

1. Download the jQuery UI Touch Puch library here,

2. Include jQuery and jQuery UI in your page,

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

3. Include jQuery UI Touch Punch js after the jQuery UI library,

<script src="jquery.ui.touch-punch.min.js"></script>

Note : If you are using jQuery UI's components, Touch Punch must include after jquery.ui.mouse.js as Touch Puch modify its behaviour.

Thats enough, It would solve the Touch Functionality for jQuery UI components. Test it here

Tags