Drag is not working [solved] - maybe important for you

ionic-v1
1

Hello,
dragging under android 4.4+ is not working.
im only getting one dragstart drag and dragend event.
what could be the reason?

on 4.3 and ios its working fine.

kind regards

2

First i thought its because of the leftSideMenu than i finaly found the answer:

it fixed the problems.

3

Hey there!

i have exactly the same problem on android 4.4+. But I couldn’t figure out how to solve it. I am currently using my directive like this:

		var dragFn = function(e) {
                e.preventDefault();
                //do stuff
            };
            var dragStartFn = function(e) {
                e.preventDefault();
                //do stuff
            };
            var dragEndFn = function(e) {
                //do stuff

            };

            scope.$on('$destroy', function () {
                $ionicGesture.off(dragGesture, 'drag', dragFn);
                $ionicGesture.off(dragEndGesture, 'dragend', dragEndFn);
                $ionicGesture.off(dragStartGesture, 'dragstart', dragStartFn);
            });
            var dragGesture = $ionicGesture.on('drag', dragFn, element);
            var dragEndGesture = $ionicGesture.on('dragend', dragEndFn, element);
            var dragStartGesture = $ionicGesture.on('dragstart', dragStartFn, element);

But it won’t work. Did I implement it the wrong way? How did you managed it?

Thank you in advance!

4

try this:

    var dragFn = function(e) {
        //do stuff
    };
    var dragStartFn = function(e) {
        //do stuff
    };
    var dragEndFn = function(e) {
        //do stuff

    };

    //First this
    element.addEventListener("touchstart", onStart);
    function onStart (touchEvent) {
        touchEvent.preventDefault();         
    }
    
    scope.$on('$destroy', function () {
        element.removeEventListener("touchstart", onStart);
        $ionicGesture.off(dragGesture, 'drag', dragFn);
        $ionicGesture.off(dragEndGesture, 'dragend', dragEndFn);
        $ionicGesture.off(dragStartGesture, 'dragstart', dragStartFn);
    });
    
    //Then your listeners
    var dragGesture = $ionicGesture.on('drag', dragFn, element);
    var dragEndGesture = $ionicGesture.on('dragend', dragEndFn, element);
    var dragStartGesture = $ionicGesture.on('dragstart', dragStartFn, element);
5

Thank you for the fast reply! I tried it (like above), but I get an error at this line

element.addEventListener("touchstart", onStart);

saying “TypeError: undefined is not a function”. Do you have any idea?

6

ah ok solved it. I used:

element.bind("touchstart", function(e) {
                e.preventDefault();
            });

Thanks for helping so far!

7

hi, your element is a jquery object use: element[0].addEventListener(“touchstart”, onStart);
or bind of the jquery object as you did.