Touch interface for sorting or ordering a list using drag and drop

Question

iPhone native apps, like the Stocks app, let you easily create a list and then drag and drop list items to order them with a drop placeholder highlight.

We have many apps that use jQuery to allow, mouse based, sort or order features, similar to this.

None of these however work on a touch interface. I'm interested in replacing these implementations with one that supports a touch interface.

Any ideas?

I'm looking for this http://jqueryui.com/demos/sortable/#default , but with mobile / touch interface support.

Answer 1

[UPDATE]: YUI is no longer in development, you should instead check https://shopify.github.io/draggable/ or https://rubaxa.github.io/Sortable/ or http://touchpunch.furf.com/

YUI 3 drag and drop module is fully prepared to work with touch interfaces transparently, you don't have to write any specific code.

I've tried it on Ipad and Android phone (also IE, Firefox, Chrome on Windows).

You can try the example from here:

http://yuilibrary.com/yui/docs/dd/list-drag.html

...as well as the rest of examples referenced in that page.

I'm using it right now on a project, if you make more specific questions I may be able to give further help.

-

You can check my slides with links for a comparison of different JS frameworks, and more YUI examples about this matter here: https://docs.google.com/presentation/d/1YPPomooNx3dP6Vv4JEEXqPmDuA1In3qp9Jz_R7FnRs4/edit

And you can test YUI drag and drop in JSFiddle here: http://jsfiddle.net/mordraug/eKe3q/5/

HTML

<div id="play">
  <ul id="list1">
    <li class="list1">Item #1</li>
    <li class="list1">Item #2</li>
    <li class="list1">Item #3</li>
    <li class="list1">Item #4</li>
    <li class="list1">Item #5</li>
  </ul>
  <ul id="list2">
    <li class="list2">Item #1</li>
    <li class="list2">Item #2</li>
    <li class="list2">Item #3</li>
    <li class="list2">Item #4</li>
    <li class="list2">Item #5</li>
  </ul>
</div>

CSS

#play ul li {
    background-image: none;
    list-style-type: none;
    padding-left: 20px;
    padding: 5px;
    margin: 2px;
    cursor: move;
    zoom: 1;
    position: relative;
}
#play ul {
    border: 1px solid black;
    margin: 10px;
    width: 200px;
    height: 300px;
    float: left;
    padding: 0;
    zoom: 1;
    position: relative;
}
#play ul li.list1 {
    background-color: #8DD5E7;
    border: 1px solid #004C6D;
}
#play ul li.list2 {
    background-color: #EDFF9F;
    border: 1px solid #CDCDCD;
}

JavaScript

YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function (Y) {
    //Listen for all drop:over events
    Y.DD.DDM.on('drop:over', function (e) {
        //Get a reference to our drag and drop nodes
        var drag = e.drag.get('node'),
            drop = e.drop.get('node');

        //Are we dropping on a li node?
        if (drop.get('tagName').toLowerCase() === 'li') {
            //Are we not going up?
            if (!goingUp) {
                drop = drop.get('nextSibling');
            }
            //Add the node to this list
            e.drop.get('node').get('parentNode').insertBefore(drag, drop);
            //Resize this nodes shim, so we can drop on it later.
            e.drop.sizeShim();
        }
    });
    //Listen for all drag:drag events
    Y.DD.DDM.on('drag:drag', function (e) {
        //Get the last y point
        var y = e.target.lastXY[1];
        //is it greater than the lastY var?
        if (y < lastY) {
            //We are going up
            goingUp = true;
        } else {
            //We are going down.
            goingUp = false;
        }
        //Cache for next check
        lastY = y;
    });
    //Listen for all drag:start events
    Y.DD.DDM.on('drag:start', function (e) {
        //Get our drag object
        var drag = e.target;
        //Set some styles here
        drag.get('node').setStyle('opacity', '.25');
        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
        drag.get('dragNode').setStyles({
            opacity: '.5',
            borderColor: drag.get('node').getStyle('borderColor'),
            backgroundColor: drag.get('node').getStyle('backgroundColor')
        });
    });
    //Listen for a drag:end events
    Y.DD.DDM.on('drag:end', function (e) {
        var drag = e.target;
        //Put our styles back
        drag.get('node').setStyles({
            visibility: '',
            opacity: '1'
        });
    });
    //Listen for all drag:drophit events
    Y.DD.DDM.on('drag:drophit', function (e) {
        var drop = e.drop.get('node'),
            drag = e.drag.get('node');

        //if we are not on an li, we must have been dropped on a ul
        if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
            }
        }
    });

    //Static Vars
    var goingUp = false,
        lastY = 0;

    //Get the list of li's in the lists and make them draggable
    var lis = Y.Node.all('#play ul li');
    lis.each(function (v, k) {
        var dd = new Y.DD.Drag({
            node: v,
            target: {
                padding: '0 0 0 20'
            }
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: '#play'
        });
    });

    //Create simple targets for the 2 lists.
    var uls = Y.Node.all('#play ul');
    uls.each(function (v, k) {
        var tar = new Y.DD.Drop({
            node: v
        });
    });
});