Drag Drop functionality

[Abhi Shinde]

Hi all,
          I am attaching the  image file. please refer it, I want to implement the exact functionality. 
I want to use this functionality for designing forms.

Its very challenging task for me.  Please give some Idea or logic.
I want to use telerik controls.

please help me.
thanks!

[Pavlina]

Hi Abhi,

RadListView offers the Items Drag & Drop capability, allowing you to easily implement scenarios that require dragging and moving data items on the page. Refer to the resources below for more information.
http://www.telerik.com/help/aspnet-ajax/listview-itemdrop.html
http://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx

Greetings,
Pavlina
the Telerik team

[Abhi Shinde]

Hi Pavlina,
                I referred the same but still there are some issues. 
Please see my previously attached image carefully.
I want to drag an item anywhere inside another listview.

(I want to design a form using UI)

Thanks.

[Pavlina]

Hello Abhi,

To achive the desired functionality you can track the id of the destinationItem by hooking to its mouseover and mouseout events and saving the DisplayIndex in order to retrieve it from dropping handler. Similar to the following:

<div>
    <telerik:RadListView runat="server" ID="RadListView1">
        <ItemTemplate>
            <div class="rlvI">
                <telerik:RadListViewItemDragHandle ID="RadListViewItemDragHandle1" runat="server" />
                data....
            </div>
        </ItemTemplate>
        <ClientSettings AllowItemsDragDrop="true">
            <ClientEvents OnItemDropping="itemDropping" />
        </ClientSettings>
    </telerik:RadListView>
</div>
<div>
    <telerik:RadListView runat="server" ID="RadListView2">
        <ItemTemplate>
            <div class="rlvI" onmouseover='itemMouseOver("<%#Container.DisplayIndex %>")' onmouseout='itemMouseOut();'>
                data....
            </div>
        </ItemTemplate>
    </telerik:RadListView>
</div>
<script type="text/javascript">
    var currentDestinationIndex = -1;
    function itemDropping(sender, args) {
        var destIndex = currentDestinationIndex;
        alert("dragged item index:" + args.get_itemIndex());
        if (destIndex > -1) {
            alert("destination index:" + destIndex);
        }
        else {
            alert("Not over RadListView2 items");
        }
    }
    function itemMouseOver(displayIndex) {
        //save the id in a variable when dragged item is over
        currentDestinationIndex = displayIndex;
    }
    function itemMouseOut() {
        //clear the variable if dragged item leaves
        //destination item boundaries
        currentDestinationIndex = -1;
    }
</script>

Greetings,
Pavlina
the Telerik team