Drag element in a slide-box (with gesture)



I’ve got this slide-box:

<ion-slide-box id="comparison" ng-class="{'step2' : step2, 'step3' : step3, 'step4' : step4, 'step5' : step5}">
     <ion-slide id="step2" class="page" ng-show="step2"></ion-slide>
     <ion-slide id="step3" class="page" ng-show="step3"></ion-slide>
     <ion-slide id="step4" class="page" ng-show="step4"></ion-slide>
     <ion-slide id="step5" class="page" ng-show="step5">
	<div class="page_content">
                <ion-content padding="false" class="parent" scroll="false" id="drag_morphing">
                    <div class="drag_content">
                        <button class="btn_custom drag" draggable>drag</button>

The button btn_custom has the properties “position: absolute” and “top: 0” and I would like to be able to drag it from “top: 0” to “top: 100%”. I’ve seen a lot of topics about drag… But it doesn’t seem to work with a slide-box!
I’ve made a directve with $ionicGesture for the events “drag”, “dragstart” and “dragend”. Here is the codepen with my directive.

.directive('draggable', function($document, $timeout) {
    return function(scope, element, attr) {
        var startY = 0, y = 0, elementW = 0, elementH = 0, parentHeight;
        parentHeight = element.parent().prop('clientHeight');
        $timeout(function() {
            elementH = element.prop('clientHeight');

        element.on('dragstart', function(event) {
            // Prevent default dragging of selected content
            startY = event.gesture.center.pageY - y;
            $document.on('drag', move);
            $document.on('dragend', release);

        function move(event) {
            y = event.gesture.center.pageY - startY;
            if (y >= 0 && y <= parentHeight-elementH) {
                    top:  y + 'px'

        function release() {
            $document.unbind('drag', move);
            $document.unbind('dragend', release);

In the codepen example, if you open the console and you drag the element, it works like a charm. You can see many values of event.gesture.center.pageY. In my own code, there is only one value. As if the drag event doesn’t work.
Here is a screen if you want to have an idea of what I wanna do:

Maybe it’s because of the slide-box. Have you ever had this problem? Is there a solution?

Thanks for your help!


I think it’s because there may be a conflict between the “dragstart” event and the slide-box. I tried with a direct injection of jQuery in the directive… But it doesn’t work.

No idea? :confused: