ASP.NET 3.5 and above only

ASP.NET TreeView - Drag and drop in external controls

Drag and drop the nodes over HTML and Server control...

  • Images
    • Nature 1
    • Nature 2
    • Nature 3
    • Nature 4
Server Controls
Panel
HTML controls
TextBox


TextArea


Image
image
[ASPX]

<obout:Tree ID="ObTree" ClientObjectID="obTree1" OnTreeNodeDrop="ObTree_TreeNodeDrop"
    OnNodeDrop="onClientNodeDrop" OnNodeDragging="onClientNodeDrag" 
    NodeDropTargets="Panel;dropTextBox;dropTextArea;dropImg"EnableDragAndDrop="true" runat="server">
...
</obout:Tree>
            
[JavaScript]
[C#]
            
protected void ObTree_TreeNodeDrop(object sender, Obout.Ajax.UI.TreeView.NodeDropEventArgs e)
{
    serverImage.ImageUrl = String.Format("~/obout.ajax.ui/treeview/{0}", e.SourceNode.Value);
}
            
[VB]
    
Protected Sub ObTree_TreeNodeDrop(ByVal sender As Object, ByVal e As Obout.Ajax.UI.TreeView.NodeDropEventArgs)
        serverImage.ImageUrl = String.Format("~/obout.ajax.ui/treeview/{0}", e.SourceNode.Value)
End Sub 
            
[Javascript]
  
        function onClientNodeDrop(sender, args) {
            if (args.target == null) {
                return;
            }
            var handled = false;
            switch (args.target.id) {
                case "dropImg":
                    handled = true;
                    args.target.src = sender.getNodeValue(args.sourceNode);
                    break;
                case "dropTextBox":
                    args.target.value = args.sourceNode.innerText ? 
                            args.sourceNode.innerText : args.sourceNode.textContent;
                    handled = true;
                    break;
                case "dropTextArea":
                    args.target.value += 'Name :' + (args.sourceNode.innerText ? 
                            args.sourceNode.innerText : args.sourceNode.textContent) + '; Url :' 
                            + sender.getNodeValue(args.sourceNode) + '\n';
                    handled = true;
                    break;
            }
            RemoveCSS();
            args.cancel = handled;
        }
        var currentTarget = null;
        function onClientNodeDrag(sender, args) {
            RemoveCSS();
            if (args.target.tagName == "INPUT" || args.target.tagName == "TEXTAREA") {
                currentTarget = args.target;
                args.target.style.backgroundColor = 'silver';
            }
            else if (args.target.tagName == "IMG") {
                currentTarget = args.target;
                setOpacity(args.target, 5);
            }
        }
        function RemoveCSS() {
            if (currentTarget != null) {
                if (currentTarget.tagName == "INPUT" || currentTarget.tagName == "TEXTAREA") {
                    currentTarget.style.backgroundColor = 'white';
                }
                else if (currentTarget.tagName == "IMG") {
                    setOpacity(currentTarget, 10);
                }
            }
        }
        function setOpacity(ele, value) {
            ele.style.opacity = value / 10;
            ele.style.filter = 'alpha(opacity=' + value * 10 + ')';
        } 
            

"It is amazing how you guys have the tools that suits our needs to the "T" and I'm really glad to see that these tools are compatible with 3.5 as we would be moving there shortly."

Ramarao Prahalad
Texas Association of School Boards

Random testimonial   All testimonials