drag and drop in windows phone

Question

i am trying to implement drag and drop feature to arrange the content of my listbox. I was able to drag the item. when i try to drag the second item to first item, it appears over the first item but when i try to drag the first item to second item, then first item goes under the second item. also i am unable to catch the drop, so that i can arrange the items.

Can anybody help me on this?

here is the sample of code i am using

 <ListBox Name="lstBoxImages" ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkits:WrapPanel 
                                Width="450" 
                                Height="Auto" 
                                ItemWidth="225" 
                                ItemHeight="Auto"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>

                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Source}" Height="200" Width="200" MouseMove="MouseMoving">
                            <i:Interaction.Behaviors>
                            <el:MouseDragElementBehavior ConstrainToParentBounds="False"/>
                        </i:Interaction.Behaviors>

                        </Image>
                    </StackPanel>


                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Code behind:

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
        List<ImageInfo> lstImages = new List<ImageInfo>();
        lstImages.Add(new ImageInfo() { ImageID = 1, Source = "Images/4.png" });
        lstImages.Add(new ImageInfo() { ImageID = 2, Source = "Images/2.png" });
        lstImages.Add(new ImageInfo() { ImageID = 3, Source = "Images/4.png" });
        lstImages.Add(new ImageInfo() { ImageID = 4, Source = "Images/2.png" });
        lstImages.Add(new ImageInfo() { ImageID = 5, Source = "Images/4.png" });
        lstImages.Add(new ImageInfo() { ImageID = 6, Source = "Images/2.png" });

        lstBoxImages.ItemsSource = lstImages;

    }

    private void MouseMoving(object sender, System.Windows.Input.MouseEventArgs e)
    {
        Image realSender = (Image)sender;
        int zIndex = Canvas.GetZIndex(realSender);
        Canvas.SetZIndex(realSender, zIndex++);
    }

my info class is:

public class ImageInfo
{
    private int _ImageID;
    private string _Source;

    public string Source
    {
        get { return _Source; }
        set { _Source = value; }
    }

    public int ImageID
    {
        get { return _ImageID; }
        set { _ImageID = value; }
    }
}

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
xmlns:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"

Answer 1

You can try control Orderable List from Bewise phone controls toolkit.
Also DataBoundListBox from Telerik RadControls for Windows Phone also supports items reordering.