Dragging objects inside a scrollview

Solar2D General Questions/Discussion
#1

I’m having problems being able to get into the “moved” phase on touch events in my objects that are a part of a scroll view. In my below code, I have a ball I want to move. I get to the “began” phase just fine, but when I move the mouse while holding the ball the scollview scrolls.

local widget = require ("widget")  
local page = widget.newScrollView({  
 width=320,height=480,  
 bgColor = {0,0,0},  
 locked = false,  
 topPadding = 50,bottomPadding = 50,  
 leftPadding = 50, rightPadding = 50,  
 hideScrollBar=true,  
 })  
  
function dragball(event)  
 local ball = event.target  
 if event.phase == "began" then  
 ball.moving = true  
 ball.parent:insert(ball)  
 display.getCurrentStage():setFocus( ball )  
 ball.x0 = event.x - ball.x  
 ball.y0 = event.y - ball.y  
 elseif event.phase == "moved" then  
 if ball.moving == false then return false end  
 ball.x = event.x - ball.x0  
 ball.y = event.y - ball.y0  
 elseif event.phase == "ended" or event.phase == "cancelled" then  
 ball.moving = false  
 display.getCurrentStage():setFocus( nil )  
 end  
end  
  
local rect = display.newRect(10,10,310,470)  
page:insert(rect)  
  
local ball = display.newCircle(200,200,20)  
ball:setFillColor(0,255,0)  
ball:addEventListener('touch',dragball)  
page:insert(ball)

Help please… Thanks! [import]uid: 213270 topic_id: 35261 reply_id: 335261[/import]

#2

This might help, search for Buttons and Touchable Objects on this page http://www.coronalabs.com/blog/2012/01/10/new-more-flexible-scrollview-widget/ [import]uid: 202223 topic_id: 35261 reply_id: 140193[/import]

#3

Thanks, but I have come across that page before, but it isn’t my situation. I should clarify that I want to be able to drag objects that I’ve placed inside a scrollview. I want my draggable object’s touch listener to interfere with the scrollView scrolling.

I should also clarify that I have confirmed that I’m not seeing the moved phase in my touch listener because in my testing I’ve done some debug printing in the below code (line 13). It always prints “began” but never prints “moved” or “ended” so it’s like the scrollview takes focus right away.

And from the link to that page, it would seem that the default behavior is that touch listeners for objects inside scrollViews interfere with scrolling (which I want) and I shouldn’t have to do anything special.

[code]
local widget = require (“widget”)
local page = widget.newScrollView({
width=320,height=480,
bgColor = {0,0,0},
locked = false,
topPadding = 50,bottomPadding = 50,
leftPadding = 50, rightPadding = 50,
hideScrollBar=true,
})

function dragball(event)
local ball = event.target
print (event.phase) – always prints “began” once and never prints “moved” or even “ended”
if event.phase == “began” then
ball.moving = true
ball.parent:insert(ball)
display.getCurrentStage():setFocus( ball )
ball.x0 = event.x - ball.x
ball.y0 = event.y - ball.y
elseif event.phase == “moved” then
if ball.moving == false then return false end
ball.x = event.x - ball.x0
ball.y = event.y - ball.y0
elseif event.phase == “ended” or event.phase == “cancelled” then
ball.moving = false
display.getCurrentStage():setFocus( nil )
end
end

local rect = display.newRect(10,10,310,470)
page:insert(rect)

local ball = display.newCircle(200,200,20)
ball:setFillColor(0,255,0)
ball:addEventListener(‘touch’,dragball)
page:insert(ball)
[/code] [import]uid: 213270 topic_id: 35261 reply_id: 140213[/import]

#4

Any help here? Is this the expected behavior of objects inside scrollViews and I need to do something else in my code? Or is scrollview not behaving properly? [import]uid: 213270 topic_id: 35261 reply_id: 140342[/import]

#5

I got it figured out. In the touch listener, you have to return true to prevent the event from going to other objects below it. [import]uid: 213270 topic_id: 35261 reply_id: 140429[/import]

#6

This might help, search for Buttons and Touchable Objects on this page http://www.coronalabs.com/blog/2012/01/10/new-more-flexible-scrollview-widget/ [import]uid: 202223 topic_id: 35261 reply_id: 140193[/import]

#7

Thanks, but I have come across that page before, but it isn’t my situation. I should clarify that I want to be able to drag objects that I’ve placed inside a scrollview. I want my draggable object’s touch listener to interfere with the scrollView scrolling.

I should also clarify that I have confirmed that I’m not seeing the moved phase in my touch listener because in my testing I’ve done some debug printing in the below code (line 13). It always prints “began” but never prints “moved” or “ended” so it’s like the scrollview takes focus right away.

And from the link to that page, it would seem that the default behavior is that touch listeners for objects inside scrollViews interfere with scrolling (which I want) and I shouldn’t have to do anything special.

[code]
local widget = require (“widget”)
local page = widget.newScrollView({
width=320,height=480,
bgColor = {0,0,0},
locked = false,
topPadding = 50,bottomPadding = 50,
leftPadding = 50, rightPadding = 50,
hideScrollBar=true,
})

function dragball(event)
local ball = event.target
print (event.phase) – always prints “began” once and never prints “moved” or even “ended”
if event.phase == “began” then
ball.moving = true
ball.parent:insert(ball)
display.getCurrentStage():setFocus( ball )
ball.x0 = event.x - ball.x
ball.y0 = event.y - ball.y
elseif event.phase == “moved” then
if ball.moving == false then return false end
ball.x = event.x - ball.x0
ball.y = event.y - ball.y0
elseif event.phase == “ended” or event.phase == “cancelled” then
ball.moving = false
display.getCurrentStage():setFocus( nil )
end
end

local rect = display.newRect(10,10,310,470)
page:insert(rect)

local ball = display.newCircle(200,200,20)
ball:setFillColor(0,255,0)
ball:addEventListener(‘touch’,dragball)
page:insert(ball)
[/code] [import]uid: 213270 topic_id: 35261 reply_id: 140213[/import]

#8

Any help here? Is this the expected behavior of objects inside scrollViews and I need to do something else in my code? Or is scrollview not behaving properly? [import]uid: 213270 topic_id: 35261 reply_id: 140342[/import]

#9

I got it figured out. In the touch listener, you have to return true to prevent the event from going to other objects below it. [import]uid: 213270 topic_id: 35261 reply_id: 140429[/import]

#10

Hi Mike, want to share the code for the solution?

#11

Hi Mike, want to share the code for the solution?