I'm working with Titanium SDK 3.1.1 and the logic in my app is like this:
I have a ScrollView that resembles a TableView which contains Views that work as sections, each section contains draggable Views, each of this horizontally draggable Views has a touchstart, touchmove and touchend event to drag them. The problem is that if I set the ScrollView's property canCancelEvents
to false, I can't scroll the ScrollView. This problem doesn't happen in iOS, only in Android.
I tried to set the canCancelEvents
property to true for Android, but while the scroll works, while I'm dragging one of the views inside the ScrollView, if by any chance I drag it vertically (the draggable views don't drag vertically, only horizontally) then the ScrollView's scroll event takes control of the event and the drag is interrupted.
This is my code:
// This function create a horizontal draggable View function evaluationItem(item) { var self = Ti.UI.createView({ width:Ti.Platform.displayCaps.platformWidth, height:88 + dpi }); var backgroundWorkspace = Ti.UI.createView({ top:0 + dpi, left:0 + dpi, backgroundColor:"#404040", width:Ti.Platform.displayCaps.platformWidth, height:'100%', zIndex:0 }); var checkEvaluation = Ti.UI.createImageView({ image:imagesPath + "CheckEvaluation.png", opacity:0, left:20 + dpi }); var notYetEvaluation = Ti.UI.createImageView({ image:imagesPath + "NotYetEvaluation.png", opacity:0, right:20 + dpi }); backgroundWorkspace.add(checkEvaluation); backgroundWorkspace.add(notYetEvaluation); var foregroundWorkspace = Ti.UI.createView({ top:0 + dpi, left:0 + dpi, backgroundColor:"#FFFFFF", width:Ti.Platform.displayCaps.platformWidth, height:'100%', zIndex:1 }); var foregroundWorkspaceDraggable = Ti.UI.createView({ top:0 + dpi, left:0 + dpi, backgroundColor:"transparent", width:Ti.Platform.displayCaps.platformWidth, height:'100%', zIndex:2 }); var curX, curY; var deltaX, deltaY; var currentPositionX, currentPositionY; var initialViewX = parseInt(foregroundWorkspace.getLeft()) , initialViewY = parseInt(foregroundWorkspace.getTop()); var limitToTheRight = Ti.Platform.displayCaps.platformWidth/2.5; var limitToTheLeft = (-1)* Ti.Platform.displayCaps.platformWidth/2.5; var neutralColor = "#404040"; var positiveColor = "#79b715"; var negativeColor = "#9e9e9e"; // event for touchstart foregroundWorkspaceDraggable.addEventListener('touchstart', function(e) { curX = e.x; curY = e.y; }); var hoveringOver = 0; // event for touchmove, this handles the dragging foregroundWorkspaceDraggable.addEventListener('touchmove', function(e) { var currentOpacity = currentPositionX / limitToTheRight; if(currentOpacity < 0) currentOpacity = 0; else if(currentOpacity > 1) currentOpacity = 1; checkEvaluation.setOpacity(currentOpacity); var currentOpacityNotYet = currentPositionX / limitToTheLeft; if(currentOpacityNotYet < 0) currentOpacityNotYet = 0; else if(currentOpacityNotYet > 1) currentOpacityNotYet = 1; notYetEvaluation.setOpacity(currentOpacityNotYet); deltaX = e.x - curX; currentPositionX = initialViewX + deltaX; if (currentPositionX > limitToTheRight) { if (hoveringOver != 1) { hoveringOver = 1; backgroundWorkspace.animate({ backgroundColor : positiveColor, duration : 250 }); } } else if (currentPositionX <= limitToTheLeft) { if (hoveringOver != -1) { hoveringOver = -1; backgroundWorkspace.animate({ backgroundColor : negativeColor, duration : 250 }); } } else { if (hoveringOver != 0) { hoveringOver = 0; backgroundWorkspace.animate({ backgroundColor : neutralColor, duration : 250 }); } } foregroundWorkspace.setLeft(currentPositionX); }); function recallControl() { foregroundWorkspace.animate({ left : 0 + dpi, duration : 500 }); } // event for touchend, this handles where the view remains in the end foregroundWorkspaceDraggable.addEventListener("touchend", function(e){ if (currentPositionX > limitToTheRight) { foregroundWorkspace.animate({ left : Ti.Platform.displayCaps.platformWidth + dpi, duration : 500 }, function() { self.animate({ height : 0 + dpi, duration : 500 }); }); } else if (currentPositionX <= limitToTheLeft) { foregroundWorkspace.animate({ left : -Ti.Platform.displayCaps.platformWidth + dpi, duration : 500 }); } else { // alert('3'); recallControl(); } }); var foregroundWorkspaceDecorator = Ti.UI.createView({ width:Ti.UI.FILL, height:1 + dpi, backgroundColor:"#d8d8d8", bottom:0 + dpi, left:0 + dpi }); foregroundWorkspace.add(foregroundWorkspaceDecorator); var evaluationIdView = Ti.UI.createView({ width:20 + dpi, height:'100%', top:0 + dpi, left:10 + dpi, backgroundColor:"transparent" }); var evaluationIdLabel = Ti.UI.createLabel({ text : item.id + ".", font : { fontSize : 20 + dpi, fontWeight : "bold" }, color : item.color }); evaluationIdView.add(evaluationIdLabel); foregroundWorkspace.add(evaluationIdView); var evaluationContentLabel = Ti.UI.createLabel({ text : "This is an evaluation,you can drag to the left or to the right and it will evaluate your kid", left : 40 + dpi, width : Ti.UI.FILL, right : 30 + dpi, font : { fontSize : 14 + dpi }, color : "#7a7a7a" }); foregroundWorkspace.add(evaluationContentLabel); self.add(backgroundWorkspace); self.add(foregroundWorkspace); self.add(foregroundWorkspaceDraggable); return self; } // function that creates the sections for the ScrollView function evaluationCategory(category) { var backgroundColor = "#229ce5"; switch(category.categoryType) { case 0: // blue backgroundColor = "#229ce5"; break; case 1: // pink backgroundColor = "#c13a78"; break; case 2: // orange backgroundColor = "#f87739"; break; case 3: // green backgroundColor = "#79b715"; break; case 4: // yellow backgroundColor = "#ffd024"; break; } var self = Ti.UI.createView({ height:Ti.UI.SIZE, layout:"vertical" }); var titleView = Ti.UI.createView({ width:Ti.UI.FILL, height:60 + dpi, backgroundColor:backgroundColor }); var titleViewLabel = Ti.UI.createLabel({ text : "physical", font : { fontSize : 20 + dpi, fontWeight : "bold" }, color : "#FFFFFF", textAlign : "left", width : Ti.UI.SIZE, height : Ti.UI.SIZE, left : 10 + dpi }); titleView.add(titleViewLabel); self.add(titleView); var workspace = Ti.UI.createView({ width:Ti.UI.FILL, height:Ti.UI.SIZE, layout:"vertical" }); for (var i = 0; i < 5; i++) { workspace.add(evaluationItem({ id : i, color : backgroundColor })); } self.add(workspace); return self; } // my ScrollView if(osname === 'android'){ cancelEvents = true; } var scrollview = Ti.UI.createScrollView({ top : 0, left : 0, contentHeight : Ti.UI.SIZE, scrollType : 'vertical', layout : 'vertical', showVerticalScrollIndicator : true, canCancelEvents:cancelEvents, }); scrollview.add(evaluationCategory({ categoryType : 0 })); scrollview.add(evaluationCategory({ categoryType : 1 })); scrollview.add(evaluationCategory({ categoryType : 2 })); scrollview.add(evaluationCategory({ categoryType : 3 }));