Toolkit

TK.DragDrop

{
    Elements: {
        ContainerA: {
            style: {
                backgroundColor: "#fee",
                width: "400px",
                height: "400px"
            },
            className: "toolkitDragDropContainer",
            Elements: {
                ItemA: {
                    _: TK.DragDrop,
                    innerHTML: "Item A"
                },
                ItemB: {
                    _: TK.DragDrop,
                    innerHTML: "Item B"
                }
            }
        },
        ContainerB: {
            style: {
                backgroundColor: "#eef",
                width: "400px",
                height: "400px"
            },
            className: "toolkitDragDropContainer",
            Elements: {
                ItemC: {
                    _: TK.DragDrop,
                    innerHTML: "Item C"
                },
                ItemD: {
                    _: TK.DragDrop,
                    innerHTML: "Item D (New element source)",
                    ElementTemplate: {
                        _: TK.DragDrop,
                        innerHTML: "I am a new element"
                    }
                }
            },
            Drop: function(element, x, y) {
                alert("Dropped in ContainerB: "+ element.innerHTML + " at location ("+x+","+y+")");
            }
        }
    }
}