Question

I am trying to allow the user to drag and drop and image from on position to another. The screen layout is as follows:

1 2 3

4 5 6

7 8 9

I want the user to grab image 2, 4, 6, or 8 and drag it to image 5. Upon dragging to image 5 I want to load up a fragment. The user can only drag the image in a straight line from it’s current position to 5’s position. ie image 2 and only drag down and only until it is overtop of image 5, image 4 can only drag right until overtop of 5, etc.

Any insight on how to do this is greatly appreciated.

Thanks,
DMan

Answer 1

So I figured out a way to get it to work. Pretty hacky but I basically use the image positions and transition it via a margin in the direct that I want from it’s center until it reaches the desired position.

I created a temp image (mTempImage) and hide my main image because the image had parameters set in the layout that forced it to stay above a specific item in the layout and wouldnt let it margin less than that items height.

Here is a sample from my onTouchListener

int eventX = (int)event.getX();
                    int eventY = (int)event.getY();

                    int movingViewHeight = view.getHeight();
                    int movingViewWidth = view.getWidth();

                    int destinationTileTop = mTileHere.getTop();
                    int destinationTileLeft = mTileHere.getLeft();

                    // Transparent 'Tile Here' image (1)
                    // Transitional 'Tile Here' image (0 - 1)
                    // Opaque 'Tile Here' image (0)
                    float alphaMultiplier = 0;

                    switch(view.getId()) {
                    case R.id.item_position_2:  
                        // Only allow sliding down from center of object (positive eventY)
                        if (eventY > movingViewHeight / 2) {
                            // Calculate the amount that the image has moved from it's center point
                            int posFromImgCenter = (eventY - movingViewHeight / 2);
                            // Check if the image has reached the center point and stop it's motion any farther
                            if (posFromImgCenter >= destinationTileTop) {
                                params.setMargins(view.getLeft(), destinationTileTop, 0, 0);
                                alphaMultiplier = 1;
                            }
                            // Slide the image with the positioning of the persons finger
                            else {
                                params.setMargins(view.getLeft(), posFromImgCenter, 0, 0);
                                alphaMultiplier = ((float)posFromImgCenter / (float)destinationTileTop);
                            }

                        }
                        // Attempting to slide in an invalid direction leave the image where it is
                        else 
                            params.setMargins(view.getLeft(), view.getTop(), 0, 0);

... MORE CODE HERE FOR OTHER ITEM POSITIONS

// AFTER SWITCH STATEMENT COMPLETE UPDATE VIEW ITEMS ACCORDINGLY

// default 0 if not set with valid movement
                    mTileHere.setAlpha((int)(255 - (255 * alphaMultiplier)));
                    mTempImage.setLayoutParams(params);
                    mTempImage.invalidate();

Thanks,
DMan