Download custom drag and drop script

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

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
js/drag-drop-custom.js = Main Javascript file
css/demos.css = CSS file the demos

Introduction

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();
dragDropObj.addSource('box1',true);
dragDropObj.addSource('box2',true);
dragDropObj.addSource('box3',true);
dragDropObj.addSource('box4',true);
dragDropObj.addTarget('dropBox','dropItems');
dragDropObj.addTarget('leftColumn','dropItems');
dragDropObj.init();

This script is a part of a suite of tools which will be released as package some time before christmas this year.

Important methods

addSource

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.

addTarget

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:
1. id of dragged element
2. id of the element the item was dropped on.
3. mouse x coordinate when item was dropped
4. mouse y coordinate when item was dropped

init

Initializes the script. This method should be called after addSource and addTarget

setSlide

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.

Update log

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.