Drag and Drop using JavaScript (not HTML5)?

Question

I am making an offline Hybrid android app using HTML5.

Anyhow, drag and drop feature of HTML5 is not yet supported on android, and so I wanted to use some other method.

What are the other ways in which drag and drop be implemented using JavaScript?

Answer 1

you can use the jquery-ui-touch-punch or Mobile Drag And Drop to achieve drag and drop in mobile.

They can be found at the following links respectively.

http://touchpunch.furf.com/

http://www.stevefenton.co.uk/cmsfiles/assets/File/mobiledragdrop.html

Answer 2

The basics for running Drag and Drop using JavaScript without any form of extra library or built in HTML5 functions are to attach to the various mouse / touch events in the browser;

• mousedown / touchstart

When the mousedown / touchstart is triggered, you would clone the element that has been clicked (or move the existing element) and set it up with an absolute position so you can move it around the page. When the dragging starts you would setup a reference to the element thats being dragged so your movement events can keep track of whats currently being moved. Once this event has been fired and you have a reference to the element, you would attach the mousemove / touchmove events to the document and start listening for the actual movements.

• mousemove / touchmove

When the mousemove / touchmove events are fired, you can use the events position to move the element around the screen. For best performance, you would attach the mousemove / touchmove events to the entire document rather than just a single element, otherwise you run into problems where the mouse will move faster than you can update the element.

• mouseup / touchend

Finally, when mouseup / touchend is fired, you can use the final position to calculate against a droppoint. You would also release the mousemove / touchmove events and any reference to the element being dragged.

Quick example using JQuery to manage touch events, can be tested at http://jsfiddle.net/y9f3B/ ;

var target = null;

$('#draggables li').on('touchstart', function(e) {
    var target = $(e.currentTarget).clone();
    target.addClass('dragging');

    // run an intial alignment before adding to the dom
    target.css('left', (e.originalEvent.touches[0].clientX - (target.width() / 2)));
    target.css('top', (e.originalEvent.touches[0].clientY - (target.height() / 2)));

    $('body').append(target);

    $(document).on('touchmove', function(e) {
        if (target != null) {
            // move the target
            target.css('left', (e.originalEvent.touches[0].clientX - (target.width() / 2)));
            target.css('top', (e.originalEvent.touches[0].clientY - (target.height() / 2)));
        }
    });

    $(document).on('touchend', function(e) {
        if (target != null) {            
           var x = (target.offset().left + (target.width() / 2));
           var y = (target.offset().top + (target.height() / 2));

           // calculate if were inside of the dropzone
           var offset = $('#dropzone').offset();

            if (x > offset.left && x < (offset.left + $('#dropzone').width()) && y > offset.top && y < (offset.top + $('#dropzone').height())) {
              var dropped = target.clone();
              dropped.removeClass('dragging');

              $('#dropzone').append(dropped);   
            }

           target.remove(); 

           $(document).off('touchmove');
           target.off('touchup');

           target = null;
        }
    });
});