zDragDrop - Java Script

You’ve seen that simulating drag and drop takes a fair amount of JavaScript. You may be wondering,“Isn’t there some sort of JavaScript library that handles all this for me?” The answer is the zDragDrop library. This library provides a set of objects that encapsulate much of the simulated drag-and-drop process.You need only include the file zdragdroplib.js in your page to take advantage of the functionality.

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:

  • dragstart — Occurs immediately before beginning to drag the element.
  • drag — Fires continuously while the element is being dragged.
  • dragend —Fires after the element has stopped being dragged, regardless of whether it has been dropped on a valid drop target.

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:

  • type – The type of event that occurred (such as “drag” or “dragend”).
  • target — The object that caused the event (a zDraggable or zDropTarget).
  • timeStamp — The date and time, in milliseconds, when the event occurred.
  • relatedTarget — The other object related to the event.When the drop event fires on a zDropTarget,this is always equal to the zDraggable object that was dropped on it.
  • cancelable — Indicates whether the event can be cancelled.

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:

  • zDraggable.moveTo(x, y) — Moves the zDraggable element to the position x,y.
  • zDropTarget.getLeft() — Returns the left coordinate of the drop target.
  • zDropTarget.getTop() — Returns the top coordinate of the drop target.

If you use these methods along with the event handling functionality of zDragDrop,the code becomes much cleaner:

As you can see, the JavaScript section of this code is markedly smaller than that of the example in the previous section. The first two lines of JavaScript create the zDraggable and zDropTarget objects.Then, the drop target is registered to the zDraggable object by using addDropTarget().Finally, an event handler for the drop event is added to the drop target.That event handler moves the draggable element to the upper-left corner of the drop target by making use of the previously mentioned methods. Remember, the relatedTarget property of the event object is equal to the draggable element when used in a drop event.

Of course, all this code must be called after the page has been loaded, so the onload event handler is used for that purpose.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Java Script Topics