TK.DragDrop

Simple drag/drop helper. Use _: TK.DragDrop to make an element dragable. Use the css class name "toolkitDragDropContainer" to mark that element as a drop area.

During drag and drop, the following styles are available for extra styling: toolkitDragDropContainerArea (Marks all dropable areas), toolkitDragDropContainerHover (Marks the area currently hovering over).

{
    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"
                    }
                },
                ItemE: {
                    _: TK.DragDrop,
                    innerHTML: "Item E (With custom hover)",
                    HoverTemplate: {
                        innerHTML: "I am a custom hover"
                    }
                },
                ItemF: {
                    _: TK.DragDrop,
                    innerHTML: "Item F (With dropped callback)",
                    Dropped: function(container, addedElement) {
                        alert('The container I am dropped in has ' +
                            container.childNodes.length + ' items');
                    }
                },
            },
            Drop: function(elementOrTemplate, x, y) {
                // If both HoverTemplate and ElementTemplate is set, 
                // the template will be passed instead of an element

                alert("Dropped in ContainerB: "+ elementOrTemplate.innerHTML + " at location ("+x+","+y+")");

                // If this method is adding the block manually (or handling it some other way)
                // return anything other than null/undefined/false, so the element won't be added automatically
                // this return value will also be passed into the .Dropped callback
            }
        }
    }
}