Jquery-ui sortable | How to get it work on iPad/touchdevices

ipadjquery-uijquery-ui-sortablescrolltouch

How do I get the jQuery-UI sortable feature working on iPad and other touch devices?

I tried to using event.preventDefault();, event.cancelBubble=true;, and event.stopPropagation(); with the touchmove and the scroll events, but the result was that the page does not scroll any longer.

Any ideas?

Best Answer

Found a solution (only tested with iPad until now!)!

https://github.com/furf/jquery-ui-touch-punch

Related Solutions

JQuery UI Draggable/Sortable – Get reference to new item

In the demo you reference, there's actually a bug; after you drag an item down it inserts a cloned li with an id which is a duplicate of its brother's into the DOM, so beware (a bug was filed about this but there's no activity around it).

I did a few things to achieve this:

To get around the limitation of the demo that I described above, instead apply a class to the draggable items that will be linked to the sortable:
```
<ul>
    <li class="new-item ui-state-highlight">Drag me down</li>
</ul>
```

Make items with that class draggable, instead of selecting an element by id:

 $(".new-item").draggable({
     connectToSortable: "#sortable",
     helper: "clone",
     revert: "invalid"
 });

Tap into the stop event of the sortable, and perform some simple logic about the item that was dropped, leveraging the fact that an item with the class new-item could only have been dropped (and isn't simply an existing item in the sortable):

$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if (ui.item.hasClass("new-item")) {
            // This is a new item
            ui.item.removeClass("new-item");
            ui.item.html("<b>HI</b>");
        }
    }
});

Note that you could use the data-* attribute instead of adding a helper class.

Here's a working example: http://jsfiddle.net/andrewwhitaker/twFCu/

Hope that helps.

Javascript – Scroll to an element with jQuery

Assuming you have a button with the id button, try this example:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

Best Answer

Related Solutions

JQuery UI Draggable/Sortable – Get reference to new item

Javascript – Scroll to an element with jQuery

Related Topic