Generic Drag Engine (JQuery)

Features Download Screenshots History Awards Templates Tutorials Extensions

Hexagora Generic Drag Engine Extension (for JQuery)
There is a similar extension that supports Prototype at this page

This extension will permit you to create pages with advanced drag&drop support; just take a look at samples below. Download the drag&drop (for Prototype) sample file.

Usage:
1- The Generic Drag Engine (Jquery) needs the JQuery Extension so draw a prototype extension into your page and send it to back using the top toolbar (there is another one which uses Prototype if needed)

2- Draw objects on your page and choose those you want to drag (in absolute mode!)

3- Draw a Drag Engine extension for every object you want to drag

4- For every "Drag Engine" you have to specify the object that will start the Drag&Drop (Drag Pointer) and the Layer that will be moved or copied when dragging (Drag Layer)

5- Optionally specify a "Drop Target"; if the object will be dropped over a specified Drop Target the Engine will call a javascript function specified by the "Drop Callback" property.
This function will receive an object parameter specifying the source id and the destination id so you can manage it in an advanced way.

The "Drop Callback" function:

function dropfruit(o)
{
var srcId=o.src;
var dstId=o.dst;
alert("Drop!");
}

Drag Windows

In this sample I specified Engine parameters as follows:
- Drag Pointer = The title bar containing the "Drag Me" title
- Drag Layer = The layer containing the title and the body of the window
- Drag Mode = move (object will be moved on the page)

Drag & Drop Fruits into basket

In this sample I specified Engine parameters as follows:
- Drag Pointer = every fruit
- Drag Layer = every fruit
- Drag Mode = copy (object will remain in the same position, a copy of it will be dragged)
- Drop Callback = dropfruit (a function that manages drops made by me)
- Drop Target 1 = basket (the layer with the basket image)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu egestas urna. In faucibus pulvinar lorem sed sodales. Phasellus vulputate nulla in ipsum pretium eu dapibus purus hendrerit. Sed ut erat non purus malesuada lobortis sollicitudin id mi. Aliquam at massa tellus. Duis hendrerit, nibh vitae mattis dignissim, elit tellus interdum ante, ut tempus ipsum lectus non dolor. Curabitur magna lacus, venenatis sed porta ac, cursus ac tellus. Vestibulum pellentesque malesuada lacus sed sodales. Duis quis purus ut risus porttitor dapibus non vitae nibh. Nunc quam risus, pulvinar in dictum eu, mattis vel purus. Maecenas aliquam aliquam est, eu iaculis dolor semper quis. Donec dictum volutpat elit, convallis malesuada erat sodales eget. Pellentesque volutpat, nisl in condimentum vulputate, mauris dolor cursus odio, a posuere elit eros ultrices est. Vestibulum mollis lobortis fringilla. Phasellus ornare ante eget odio dapibus vel sollicitudin lacus commodo. Sed ultrices, lacus eget consectetur faucibus, nisl tortor pharetra lectus, ut pulvinar est diam nec felis. Maecenas vel dui ipsum, at laoreet eros. Donec ornare odio dignissim dui placerat dictum. Etiam dolor ligula, porta a lobortis pretium, dictum at neque. Cras nec dui sem.

Mauris leo justo, posuere vel tristique ut, dignissim sit amet erat. Etiam et fringilla turpis. Maecenas pulvinar pulvinar nunc eu luctus. Sed eu purus eros, non mollis nisi. Nulla facilisis purus eu tortor faucibus consectetur. Fusce arcu nisi, ultricies vitae porta vitae, mattis a dolor. Nam nec nibh augue. Integer aliquam massa et quam eleifend vitae tempor sem consectetur. Ut porta, erat non aliquam congue, est ante bibendum lectus, sit amet malesuada mauris lorem eget purus. Nulla ullamcorper est ac neque laoreet egestas. Phasellus quis ultricies erat. Suspendisse in urna mauris. Pellentesque enim risus, tristique et hendrerit sed, consectetur eget neque. Nullam eleifend, mauris eu volutpat ullamcorper, velit justo pulvinar nisi, sit amet tempus quam nisl vel lectus. Donec tempor tellus tempus erat luctus nec pharetra neque adipiscing. Etiam consequat convallis purus in malesuada. Suspendisse in ultricies metus.

Create your site in minutes!

Dynamic HTML Editor is a powerful HTML (WEB page) Editor that permits you to create your site in a WYSIWYG (What You See Is What You Get) environment using both CSS and/or tabled layouts. Dynamic HTML Editor's design emphasizes simplicity and ease of use. You'll find that you can create great looking websites almost instantly with virtually no learning curve!
Also great for creating server pages (asp, jsp, php, cfm, ...)!

Clear Basket

Support | Contacts