- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
Download custom drag and drop script
You can download the entire script from this Zip file.
Files included in the package:
- demo-drag-drop-1.html, demo-drag-drop-2.html and demo-drag-drop-3.html = Demo files
- css/demos.css = CSS file the demos
This script gives you the possibility to implement drag and drop features into your script. What you have to do is to create an object of the class DHTMLgoodies_dragDrop and then assign dragable elements and drop zones. Example:
var dragDropObj = new DHTMLgoodies_dragDrop();
This script is a part of a suite of tools which will be released as package some time before christmas this year.
Add a dragable element. Arguments to this methods are
- id of element and
- true|false if the element should slide back into it's original position after drop.
- true or false if you want to allow dragging along the x-axis. (Optional, default = true)
- true or false if you want to allow dragging along the y-axis. (Optional, default = true)
- id(String) of element. This argument is optional. If a value is sent, you will not be able to drag the element outside the boundaries of the element with this id.
- Name of function(string). Name of function to call when drag is initiated. Example: "onDragStartFunction"(Only the name).
The function with this name will be called with these arguments: 1) id of the cloned version of the element, and 2) the id of the original element. This script creates a "copy" of the dragged element. The "copy" is the element you see when drag is in process. Look at the code in demo2 for examples on how to use this argument.
Assign action to an element when a dragable item is dropped on it.
- id of element and
- name of function(example: "dropItems") which would be called when an item is dropped on the drop zone. This function would be called with the following arguments:
- id of dragged element
- id of the element the item was dropped on.
- mouse x coordinate when item was dropped
- mouse y coordinate when item was dropped
Initializes the script. This method should be called after addSource and addTarget
Arguments to this function is boolean true or false, false if you want to cancel the sliding animations and true if you want to enable it.
- October, 21st, 2006: New feature: Possible to define custom "on drag start" functions.
- September, 18th, 2006: New features: 1) Limit movement in either vertical or horizontal direction . 2) Limit drag by parent id.