Building `Drag-and-Drop` DIVs: Polishing the Look and Feel
This is the last tutorial of the series “Building drag-and-drop DIVs.” Welcome back. In three parts, this series introduces the key points for creating dragging DIV elements, for quick inclusion in web pages, emulating the behavior of many user interfaces found in current desktop applications.
Building `Drag-and-Drop` DIVs: Polishing the Look and Feel - Turning DOM-based DIVS into dragging elements: using the X library (Page 4 of 5 )
It’s precisely for that reason that I’ll use this package for converting the brand new DOM-based DIVs into dragging boxes. Here’s an example of how you can create these kind of elements:
As shown above, first I’ve included the corresponding source files “x_core.js”, “x_events.js” and “x_drag.js” from the X library, required to perform the dragging process on the DOM-based DIV element, and finally defined the relevant “initDomDiv()”,”domdivOnDragStart()” and “domdivOnDrag()” functions, which are responsible for moving the DIV around the web page whenever the mouse is dragged on it.
Also, as you can appreciate, the “domdivOnDragStart()” function is in fact doing nothing (its definition is empty), because I haven’t specified a particular task to be performed at the start of the dragging process. You may want to change this and define this function to have it do something more useful.
Finally, after the page has been loaded, the script above creates a new DOM-based DIV element, and executes the “initDomDiv()” function, which, as you know, turns this element into a drag-and-drop box.
So far, the script that you just saw is now capable of building a window-like DIV, which is also a dragging element. I think this structure might be something really useful to use on web-based interfaces, aimed at emulating the behavior of desktop applications. Quite good, right?