Creating a draggable element
The zDraggable class can be used to make any absolutely-positioned DOM element draggable. The constructor takes two arguments, the DOM element to make draggable and a set of constraints determining how the element can be dragged. The second argument is made up of one or more special values.To make an element draggable horizontally only,use zDraggable.DRAG_X as the second argument:
To make an element draggable vertically only, use zDraggable.DRAG_Y as the second argument:
If the element must be dragged in both directions, use the bitwise OR operator to combine the two values:
Because the zDraggable constructor expects a DOM element as an argument, you can use this code only after the page has completely loaded.
Creating a drop target
Using the zDragDrop library, you must explicitly set a drop target for a draggable element. To start, create a zDropTarget object like this:
After you have created the drop target, you can add it to the draggable element by using the addDropTarget() method. For example:
With this code set up, it’s now possible to use the zDragDrop library’s built-in events to manage the dragging and dropping.
Although not as robust as Internet Explorer’s drag-and-drop events, the zDragDrop library does offer a few basic events that can make dealing with simulated drag and drop a little bit easier.
The zDraggable object supports three events:
The zDropTarget object supports only one event, drop,which occurs when a draggable item is dropped onto it.
To make use of these events, the zDragDrop library uses DOM-style event handlers that can be assigned using the addEventListener() method. Unlike the DOM, it has only two arguments: the type of event to handle and the event-handling function. For example, the following code assigns an event handler to a zDropTarget object that will display the message “dropped” when an item is dropped:
It’s also possible to remove event handlers by using removeEventListener() with the same arguments:
The zDragDrop library also supports an event object that contains extra information about a given event.The properties of this event object are:
Additionally,the event object supports one method, preventDefault(),which can be used to prevent the default behavior of an event.Currently, the only event that can be prevented is dragstart.
The event object is passed into an event-handler function as the only argument,so you can access it this way:
To recreate the effect of the drop target example from the previous section, you can make use of several other methods built in to the zDragDrop library:
If you use these methods along with the event handling functionality of zDragDrop,the code becomes much cleaner:
Of course, all this code must be called after the page has been loaded, so the onload event handler is used for that purpose.
Java Script Related Tutorials
|Adv Java Tutorial||Core Java Tutorial|
|Java-Springs Tutorial||Java Servlets Tutorial|
|EJB(Enterprise JavaBeans) Tutorial||JavaServer Faces (JSF) Tutorial|
|Java Swing Tutorial||Java Tutorial|
|JavaMail API Tutorial||Java 8 Tutorial|
|Java XML Tutorial||Java Bean Utils Tutorial|
|The Java Debugger (JDB) Tutorial||Java.math Package Tutorial|
Java Script Related Interview Questions
|Java Script Interview Questions||Adv Java Interview Questions|
|Core Java Interview Questions||Java-Springs Interview Questions|
|Java Servlets Interview Questions||EJB(Enterprise JavaBeans) Interview Questions|
|JavaServer Faces (JSF) Interview Questions||Java Swing Interview Questions|
|Java 8 Interview Questions||Java XML Interview Questions|
|JavaFX Interview Questions||The Java Debugger (JDB) Interview Questions|
Java Script Related Practice Tests
|Java Script Practice Tests||Adv Java Practice Tests|
|Core Java Practice Tests||Java-Springs Practice Tests|
|Java Servlets Practice Tests||EJB(Enterprise JavaBeans) Practice Tests|
|JavaServer Faces (JSF) Practice Tests||Java 8 Practice Tests|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.