Hi!
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>
</div>
</ion-content>
</div>
</ion-slide>
</ion-slide-box>
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');
},200);
element.on('dragstart', function(event) {
// Prevent default dragging of selected content
event.gesture.preventDefault();
startY = event.gesture.center.pageY - y;
$document.on('drag', move);
$document.on('dragend', release);
});
function move(event) {
console.log(event.gesture.center.pageY);
y = event.gesture.center.pageY - startY;
if (y >= 0 && y <= parentHeight-elementH) {
element.css({
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!