Sorting by Drag & Drop in a scroll view

[Pentos]

Hi everybody,

I'm new with Ngui.

Thanks to the example 7 I made a vertical scroll view with 10 items.
Now I would like to be able to sort the item with a drag and drop system. For example put the item 9 between the items 2 and 3.

To do this I would like to do something similar to the smartphone. For example on an Iphone when you do a long click on an application you can drag and drop this application.

So I have two questions :
     - How can I detect a long click on an item in my scroll view ( which is similar to the example 7)
     - How can I sort the item by a drag and drop?


Thank you in advance

[Pentos]

By Using Drag & Drop tools ( DragDropRoot, DragDropContainer, DragDropItem) I can drag and drop my items in my scroll view but :

     - How can I define a drop zone? I want to my items can only dropped on my scroll view.
     - How can I automatically moved the others items when I dropped an Item ? When I put an Item between the Items
       2 and 3 I would like that the Items 3 to 10 slide down and the dropped item take the place of the item 3.
     - How can I enabled Drag and Drop by a long click?

Thank you

[ArenMook]

Drop zone -- any collider with DragDropSurface on it.

How you can move items -- look at what drag & drop example does. There I create a 3D object, but you can move an existing one instead by changing its parent (don't forget to inform the widget that its parent has changed afterwards).

In OnPress(true) record the time. In Update check the time -- once a certain amount has passed, begin the drag.

[Pentos]

Thanks ArenMook,

I'll try and I'll come back to post if it's works or if I experiences any issues.

[Pentos]

Sorry for the delay of my end.
When I change the "prefab" from the drag and drop Item script to move a 2D item and not a 3D object it works but I can drop the Item just once.

How can I do to allowed the item to be drag and drop several times?

Thank you

[ArenMook]

Did you forget to re-enable the collider?

[Pentos]

The box collider stay enabled.

When I have a DragDropContainer and a DragDropSurface on two different object I can drag and drop the object just once (a clone is created and the box collider stay enabled but I can't drop it again).

When I have a DragDropContainer and a DragDropSurface on the same object (it's what I want) When I drop an object a clone it's created but whatever where I drop it, it stayed at the same position. But in this case I can drag and drop the object several times.

[ArenMook]

Most common case, aside from not enabling the collider, is messing up the layers. NGUI raycasts into colliders, but if the colliders are on wrong layers, it won't work. When you reparent something, UIPanel forces the layer change on all the child widgets.

[Pentos]

Ok it works when the DragDropContainer and the DragDropSurface are on two different objects.

The problem is I want that both the DragDropSurface and The DragDropContainer to be on the same Object : My Uigird, because I want to be able to drag and drop item inside my scroll view.

I'm at a little bit of a lost and I really don't see how I can handle it.

[Pentos]

Puting a UIDragObject script on my Items work great. I can scroll Up/Down my panel and when the UIDragObject script is enabled I can drag the items.

Now I have to resorted the Item when I drag one. It seems that there is no script to do it with Ngui.

I think about using collider to detect when an Item is moving on another item. If yes I can detect the collision and move Up the items.

Is it a good way to do it or is there a better way?

Thank you

[ArenMook]

It would be something similar to the drag & drop example -- disable the collider of whatever is being dragged, react to events based on what's underneath the drag.