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 + ')';
        } 
            

"I want to say your product is excellent – far more than we were expecting!"

Jorge Rojas Mata
UAI

Random testimonial   All testimonials