0

I need to make an item draggable via the mouse and via touch on iOS devices, without installing any new libraries such as jquery-ui.

The answer found here https://stackoverflow.com/a/16448981/8799440 worked really well for the mouse events.

Below is what is retrieved from that answer:

function handle_mousedown(e){
    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();
    function handle_dragging(e){
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
        .offset({top: top, left: left});
    }
    function handle_mouseup(e){
        $('body')
        .off('mousemove', handle_dragging)
        .off('mouseup', handle_mouseup);
    }
    $('body')
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
}

$('#id').mousedown(handle_mousedown);

I've tried reusing this code, with all the touch counterparts for the mouse events such as touchstart instead of mousedown

But that as expected doesn't seem to work, I suspect this is because the touch API is completely different from the mouse API

Is there a work around to make this work?

Thank you!

seansylee
  • 46
  • 1
  • 7
  • 1
    Take a look at http://www.javascriptkit.com/javatutors/touchevents.shtml – hewiefreeman May 02 '19 at 00:53
  • Thank you! that helped alot. But, I've noticed is that, if both mousedown, and touchstart/enter are applied to the same div, it only registers the mouse event and not the touch (even on touch). Any idea why? – seansylee May 03 '19 at 03:27
  • 1
    You need to make sure you're on a mobile device, and decide which to use in your logic. Check out https://stackoverflow.com/a/11381730/1584308 – hewiefreeman May 03 '19 at 04:09

0 Answers0