Building Drag and Drop Objects in Corona SDK

In a lot of mobile games, you’ll find yourself dragging a character around the screen to complete a puzzle, fight enemies, or interact with other objects. Corona SDK has made it easy for you to implement this functionality.

In this tutorial, you’ll learn how to attach an event listener to an object. This event listener will allow the player to drag an object around the screen and the drag will stop when the player removes his or her finger from the screen. I’ll be working from one file, but you can feel free to use this code anywhere you see fit. Let’s jump in.

First, we are going to hide the status bar. This is only necessary when you are starting from scratch and should only appear in main.lua. Otherwise, feel free to skip this line.

-- hide the status bar
display.setStatusBar(display.HiddenStatusBar)

Next, we’ll create a square. This square can be replaced with an image or another display object. In our example, the square object will be dragged around the screen.

-- create a square and put it in the center of the screen
local square = display.newRect( 100, 100, 50, 50)
square:setFillColor( 1 )

Then, we’ll create a function that will be called when the object is touched. In this function, we’ll record the original x and y position in the began phase. The began phase occurs when the object is first interacted with. Then, the function will move on the to the moved phase and this phase will move our object according to the event. Finally, when the player stops interacting with the circle, we’ll remove the object focus so Corona knows we are done with the touch function.

-- touch listener function
function square:touch( event )
 if event.phase == "began" then
  -- first we set the focus on the object
  display.getCurrentStage():setFocus( self, event.id )
  self.isFocus = true

  -- then we store the original x and y position
  self.markX = self.x
  self.markY = self.y

 elseif self.isFocus then

  if event.phase == "moved" then
   -- then drag our object
   self.x = event.x - event.xStart + self.markX
   self.y = event.y - event.yStart + self.markY
  elseif event.phase == "ended" or event.phase == "cancelled" then
   -- we end the movement by removing the focus from the object
   display.getCurrentStage():setFocus( self, nil )
   self.isFocus = false
  end
 end

 -- return true so Corona knows that the touch event was handled properly
 return true
end

Finally, we’ll create an event listener and attach the listener to the square. This lets Corona know that it should listen for the touch event on the square.

-- finally, add an event listener to our square to allow it to be dragged
square:addEventListener( "touch", square )

And that’s it to making an object draggable in Corona SDK! If you have questions or comments about this short game tutorial, please leave them in the comments below. Thanks for reading.

p.s. In the tutorial above, the code is broken down into sections so I can explain what is occurring in the code. For those of you that would like to learn by doing, I’ve posted the code in one big chunk so you can copy/paste this into your project.

-- hide the status bar
display.setStatusBar(display.HiddenStatusBar)

-- create a square and put it in the center of the screen
local square = display.newRect( 100, 100, 50, 50)
square:setFillColor( 1 )

-- touch listener function
function square:touch( event )
if event.phase == "began" then
 -- first we set the focus on the object
 display.getCurrentStage():setFocus( self, event.id )
 self.isFocus = true

 -- then we store the original x and y position
 self.markX = self.x
 self.markY = self.y

elseif self.isFocus then

 if event.phase == "moved" then
  -- then drag our object
  self.x = event.x - event.xStart + self.markX
  self.y = event.y - event.yStart + self.markY
 elseif event.phase == "ended" or event.phase == "cancelled" then
 -- we end the movement by removing the focus from the object
  display.getCurrentStage():setFocus( self, nil )
  self.isFocus = false
end

end

-- return true so Corona knows that the touch event was handled properly
return true
end

-- finally, add an event listener to our square to allow it to be dragged
square:addEventListener( "touch", square )