Dragging, center and swapping places of tiles/objects?

cindy.h1986 · September 30, 2013, 1:48pm

Hey guys,

I created a few rects that I made draggable, when I release them they transition to the same position and stack ontop of eachother. How do I make them line up next to each other after they have been “released” and then move so they all stay centered?

What I mean is, I touch a rect, drag it and release, first rect transition to centerX, next rect ( when released) transitions to the right of the prev rect and they move left so they stay centered on screen.

If I want to change places of already touched rects then I can drag them around and swap positions, rects that have not yet been transitioned should not be “rearrangable”?

I’m trying to utilize all my reading so far and put it in practise…

thanks

local centerX = display.contentWidth \* 0.5 local tileArray = {} -- Just a rect to see where the tiles transition to, not of importance. local stripe = display.newRect(0, 170, display.contentWidth, 60) stripe:setFillColor(100, 1, 22, 255) function touchListener(event) local phase = event.phase local target = event.target if phase == "began" then print(" Touch Tile in Phase : ", phase) display.getCurrentStage():setFocus(target) target.isFocus = true target.markX = target.x target.markY = target.y elseif phase == "moved" then print(" Touch Tile in Phase : ", phase) target.x = event.x - event.xStart + target.markX target.y = event.y - event.yStart + target.markY elseif phase == "ended" or phase == "cancelled" then print(" Touch Tile in Phase : ", phase) display.getCurrentStage():setFocus(nil) target.isFocus = false transition.to(target, { x = centerX, y = 200, time = 250, delay = 0, alpha = 1.0, transition = easing.inExpo, onComplete = function() target:removeEventListener("touch", touchListener) end }) end return true end for i = 1, 5 do tileArray[#tileArray + 1] = display.newRect(0, 0, 50, 50) local tile = tileArray[#tileArray] tile.x = 50 + (i - 1) \* 55 tile.y = display.contentHeight - 100 tile:setFillColor(math.random(0, 255), math.random(0, 255), math.random(0, 255), 255) tile:addEventListener("touch", touchListener) end

cindy.h1986 · October 1, 2013, 10:58am

I’ve made some progress though I know it’s not the right way and it’s not working like I’d hoped so If anyone can give me some advice what to do with my swapping/rearrange of the tiles.

thanks.

local tileArray = {} local tempArray = {} local colors = {"Green", "Red", "Orange", "Blue", "White"} -- tile id's local letters = {"G", "R", "O", "B", "W"} -- if the user is colorblind &nbsp; -- Just a rect to see where the tiles transition to, not of importance. local stripe = display.newRect(0, 170, display.contentWidth, 60) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;stripe:setFillColor(100, 1, 22, 255) &nbsp; function touchListener(event) &nbsp;&nbsp;&nbsp;&nbsp;local phase = event.phase &nbsp;&nbsp;&nbsp;&nbsp;local target = event.target &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if phase == "began" then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display.getCurrentStage():setFocus(target) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.markX = target.x &nbsp; &nbsp; &nbsp; &nbsp; target.markY = target.y&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;elseif phase == "moved" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;target.x = event.x - event.xStart + target.markX &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.y = event.y - event.yStart + target.markY &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;elseif phase == "ended" or phase == "cancelled" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase, target.color) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display.getCurrentStage():setFocus(nil) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to(target, {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = 160,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = 200,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time = 250,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delay = 0,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alpha = 1.0,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition = easing.inExpo,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onComplete = function()&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempArray[#tempArray + 1] = target&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target:removeEventListener("touch", touchListener)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end }) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for i = 1, #tempArray do &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local tempTile = tempArray[#tempArray] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tempTile.x = 50 + (i - 1) \* 55 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tempTile:addEventListener("touch", reArrangeListener) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return true end &nbsp; &nbsp; &nbsp; for i = 1, 5 do &nbsp;&nbsp;&nbsp;&nbsp;tileArray[#tileArray + 1] = display.newRect(0, 0, 50, 50) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local tile = tileArray[#tileArray] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile.x = 50 + (i - 1) \* 55 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile.y = display.contentHeight - 100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile.color = colors[i] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile.letter = letters[i] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile:setFillColor(math.random(0, 255), math.random(0, 255), math.random(0, 255), 255) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile:addEventListener("touch", touchListener) end &nbsp; &nbsp; function reArrangeListener(event) &nbsp;&nbsp;&nbsp;&nbsp;local phase = event.phase &nbsp;&nbsp;&nbsp;&nbsp;local target = event.target &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;target:toFront() &nbsp;&nbsp;&nbsp;&nbsp;if phase == "began" then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display.getCurrentStage():setFocus(target) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.markX = target.x &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to(target, { time = 50, delay = 0, xScale = 1.25, yScale = 1.25, transition = easing.inExpo, onComplete = function() end}) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;elseif phase == "moved" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;target.x = event.x - event.xStart + target.markX &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;elseif phase == "ended" or phase == "cancelled" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display.getCurrentStage():setFocus(nil) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to(target, { time = 50, delay = 0, xScale = 1.0, yScale = 1.0, transition = easing.inExpo, onComplete = function() end}) &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return true end &nbsp;

cindy.h1986 · October 1, 2013, 10:58am

I’ve made some progress though I know it’s not the right way and it’s not working like I’d hoped so If anyone can give me some advice what to do with my swapping/rearrange of the tiles.

thanks.

local tileArray = {} local tempArray = {} local colors = {"Green", "Red", "Orange", "Blue", "White"} -- tile id's local letters = {"G", "R", "O", "B", "W"} -- if the user is colorblind &nbsp; -- Just a rect to see where the tiles transition to, not of importance. local stripe = display.newRect(0, 170, display.contentWidth, 60) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;stripe:setFillColor(100, 1, 22, 255) &nbsp; function touchListener(event) &nbsp;&nbsp;&nbsp;&nbsp;local phase = event.phase &nbsp;&nbsp;&nbsp;&nbsp;local target = event.target &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if phase == "began" then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display.getCurrentStage():setFocus(target) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.markX = target.x &nbsp; &nbsp; &nbsp; &nbsp; target.markY = target.y&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;elseif phase == "moved" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;target.x = event.x - event.xStart + target.markX &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.y = event.y - event.yStart + target.markY &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;elseif phase == "ended" or phase == "cancelled" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase, target.color) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display.getCurrentStage():setFocus(nil) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to(target, {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = 160,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = 200,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time = 250,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delay = 0,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alpha = 1.0,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition = easing.inExpo,&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onComplete = function()&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempArray[#tempArray + 1] = target&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target:removeEventListener("touch", touchListener)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end }) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for i = 1, #tempArray do &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local tempTile = tempArray[#tempArray] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tempTile.x = 50 + (i - 1) \* 55 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tempTile:addEventListener("touch", reArrangeListener) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return true end &nbsp; &nbsp; &nbsp; for i = 1, 5 do &nbsp;&nbsp;&nbsp;&nbsp;tileArray[#tileArray + 1] = display.newRect(0, 0, 50, 50) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local tile = tileArray[#tileArray] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile.x = 50 + (i - 1) \* 55 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile.y = display.contentHeight - 100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile.color = colors[i] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile.letter = letters[i] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile:setFillColor(math.random(0, 255), math.random(0, 255), math.random(0, 255), 255) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;tile:addEventListener("touch", touchListener) end &nbsp; &nbsp; function reArrangeListener(event) &nbsp;&nbsp;&nbsp;&nbsp;local phase = event.phase &nbsp;&nbsp;&nbsp;&nbsp;local target = event.target &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;target:toFront() &nbsp;&nbsp;&nbsp;&nbsp;if phase == "began" then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display.getCurrentStage():setFocus(target) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.markX = target.x &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to(target, { time = 50, delay = 0, xScale = 1.25, yScale = 1.25, transition = easing.inExpo, onComplete = function() end}) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;elseif phase == "moved" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;target.x = event.x - event.xStart + target.markX &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;elseif phase == "ended" or phase == "cancelled" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(" Touch Tile in Phase : ", phase) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display.getCurrentStage():setFocus(nil) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to(target, { time = 50, delay = 0, xScale = 1.0, yScale = 1.0, transition = easing.inExpo, onComplete = function() end}) &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return true end &nbsp;