Drag item from table view

Is it possible to “grab and drag” an item from a table view and drag it somewhere else on the screen and vice versa drag an item from the screen and drop it into a table view?

When I touch the table view is there a way to keep it from moving up and down to make it easier to “grab” the item?

Thanks.

I don’t think you can do that that simple.

I would try to:

1 - get the row ID that need to be “grab and drag”

2 - create a new image or image group looks same as the table row. 

3 - at the same time, delete the that row in the list, so it looks like you grabbed that row.

4 - keep tracking the x, y of drag event, once user drop it (“ended”), remove that image or image group

5 - at the same time, inserting new row to the table view based on the ended event.x/y.

You also need a function the check user’s input.

You start with disable the table view’s user input, and using another event listener to check out what user want to do.

For example, if user put their finger on the same location for more than 1 sec means to start “grab”. 

If user’s finger moves more than 5 pix form the start location, that means user want to slide the tableView.

And if user’s finger moves within 5 pix and ended input less than 1 sec, it means tab on the row.

You can start record startTime and start x, start y movement when the event begin,

Manipulating a TableView is a bit of a pain because their internal data is so deeply managed. I would avoid that and use a ScrollView instead. That way you can control both the input and the view.

To drag an item off one sort of view I would probably go with the hold and drag method: Press and hold - don’t move more than a given distance for a given time. We’ll call this distance/time the threshold. If the touch listener detects that the threshold is exceeded then call the scrollview:TakeFocus(e) function to pass the touch down to the view. Remember to release any focus you might have on your own object.

Once the TakeFocus has been called the ScrollView will own the touch and scroll itself. If the threshold is not exceed you can maybe produce a ghost of the item to be dragged away or simply pop it out of the ScrollView and adjust the ScrollView content to show that it was removed. Then, any touch motion is a drag of the object which can be treated as any object being added to the ScrollView, meaning that if the object is released it should behave as if it is being added to the view for the first time.

This is not simple code to write but it can be clean and clear - so the important thing is to make sure that you have a very clear idea of what you want to achieve, build a self-container test application. When you’re happy that it can deal with the scenarios you want to handle, my recommendation is to turn it into a library that you can call from anywhere, without worrying about the implementation all over again.

I don’t think you can do that that simple.

I would try to:

1 - get the row ID that need to be “grab and drag”

2 - create a new image or image group looks same as the table row. 

3 - at the same time, delete the that row in the list, so it looks like you grabbed that row.

4 - keep tracking the x, y of drag event, once user drop it (“ended”), remove that image or image group

5 - at the same time, inserting new row to the table view based on the ended event.x/y.

You also need a function the check user’s input.

You start with disable the table view’s user input, and using another event listener to check out what user want to do.

For example, if user put their finger on the same location for more than 1 sec means to start “grab”. 

If user’s finger moves more than 5 pix form the start location, that means user want to slide the tableView.

And if user’s finger moves within 5 pix and ended input less than 1 sec, it means tab on the row.

You can start record startTime and start x, start y movement when the event begin,

Manipulating a TableView is a bit of a pain because their internal data is so deeply managed. I would avoid that and use a ScrollView instead. That way you can control both the input and the view.

To drag an item off one sort of view I would probably go with the hold and drag method: Press and hold - don’t move more than a given distance for a given time. We’ll call this distance/time the threshold. If the touch listener detects that the threshold is exceeded then call the scrollview:TakeFocus(e) function to pass the touch down to the view. Remember to release any focus you might have on your own object.

Once the TakeFocus has been called the ScrollView will own the touch and scroll itself. If the threshold is not exceed you can maybe produce a ghost of the item to be dragged away or simply pop it out of the ScrollView and adjust the ScrollView content to show that it was removed. Then, any touch motion is a drag of the object which can be treated as any object being added to the ScrollView, meaning that if the object is released it should behave as if it is being added to the view for the first time.

This is not simple code to write but it can be clean and clear - so the important thing is to make sure that you have a very clear idea of what you want to achieve, build a self-container test application. When you’re happy that it can deal with the scenarios you want to handle, my recommendation is to turn it into a library that you can call from anywhere, without worrying about the implementation all over again.