How to Drag Drop in javascript (Part I)

• Download demo project - 139 Kb

Introduction

Consider that there is requirement to drag some object e.g image and drop  it over other object from one place to another.This document explains how to achieve this using javascript.<o:p>

Approach<o:p>

For any object to participate in drag drop functionality requires to support events which enable drag drop.If object is not supporting these events directly then we should have container object which supports these events.<o:p>

Sample Code <o:p>

<o:p> 

Container which supports drag drop events is required .we are using DIV.<o:p>

<o:p> 

<div id='dMain' <o:p>

ondragstart='fnGetSource();' ondragenter='cancelevent();' ondragover='cancelevent();'                             ondrop='fnGetDestination();'><o:p>

<o:p> 

<img id='Image1'  ></img> //Source Image to be dragged<o:p>

<o:p> 

<img id='Image2'  ></img> //target image on which source image will be dropped<o:p>

<o:p> 

</div><o:p>

<o:p> 

If we drag Image1 and drop over image2 then Event ondragstart will get fired on source object . function fnGetSource will be executed.we will get id of source object.<o:p>

<o:p> 

<o:p> 

fnGetSource()<o:p>

{<o:p>

var srcElementId = event.srcElement.id ;<o:p>

alert(srcElementId);<o:p>

}<o:p>

<o:p> 

<o:p> 

When we release mouse over target object ,ondrop event gets fired on target object.This will execute function fnGetDestination.we will get id of destination object<o:p>

<o:p> 

fnGetDestination()<o:p>

{<o:p>

var destElementId = event.srcElement.id ;<o:p>

alert(destElementId);<o:p>

}<o:p>

<o:p> 

We need to handle 2 more events ondragenter and ondragover. These events are automatically fired on target object when we start dragging(ondragenter) and drags over valid drop target(ondragover).<o:p>

<o:p> 

function cancelevent ()<o:p>

{<o:p>

      window.event.returnValue = false;<o:p>

}<o:p>

<o:p> 

Sample Application<o:p>

Consider sample application where we need to drag image from one area and drop it to another as shown in following screens 1 and 2.<o:p>

<v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"><v:stroke joinstyle="miter"><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"><o:lock v:ext="edit" aspectratio="t"><o:p> 

<o:p> 

<o:p> 

<o:p> 

<o:p> 

sample code for testing.<o:p>

<o:p> 

<o:p> 

Events Reference<o:p>

1.ondragenter Event<o:p>

Fires on the target element when the user drags the object to a valid drop target.<o:p>

Syntax<o:p>

Event Information<o:p>

Event Object Properties<o:p>

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.<o:p>

Remarks<o:p>

You can handle the ondragenter event on the source or on the target object. Of the target events, it is the first to fire during a drag operation. Target events use the getData method to stipulate which data and data formats to retrieve. The list of drag-and-drop target events includes: <o:p>

• ondragenter <o:p>
• ondragover <o:p>
• ondragleave <o:p>
• ondrop<o:p>

When scripting custom functionality, use the returnValue property to disable the default action.<o:p>

<o:p> 

2.ondragover Event<o:p>

Fires on the target element continuously while the user drags the object over a valid drop target.<o:p>

Syntax<o:p>

Event Information<o:p>

Event Object Properties<o:p>

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.<o:p>

Remarks<o:p>

The ondragover event fires on the target object after the ondragenter event has fired.<o:p>

When scripting custom functionality, use the returnValue property to disable the default action.<o:p>

3.ondragstart Event<o:p>

Fires on the source object when the user starts to drag a text selection or selected object. <o:p>

Syntax<o:p>

Event Information<o:p>

Event Object Properties<o:p>

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.<o:p>

Remarks<o:p>

The ondragstart event is the first to fire when the user starts to drag the mouse. It is essential to every drag operation, yet is just one of several source events in the data transfer object model. Source events use the setData method of the dataTransfer object to provide information about data being transferred. Source events include ondragstart, ondrag, and ondragend. <o:p>

When dragging anything other than an img object, some text to be dragged must be selected.<o:p>

<o:p> 

4.ondrop Event<o:p>

Fires on the target object when the mouse button is released during a drag-and-drop operation.<o:p>

Syntax<o:p>

<o:p> Event Information<o:p>

Event Object Properties<o:p>

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.<o:p>

Remarks<o:p>

The ondrop event fires before the ondragleave and ondragend events.<o:p>

When scripting custom functionality, use the returnValue property to disable the default action.<o:p>

As of Microsoft Internet Explorer 5, drag-and-drop events can be used to carry out drag-and-drop activities, not only with input type=text elements, but also with block and inline tags. For example, text can be selected, dragged, then dropped on a div target. This causes several target events to fire, including ondragenter, ondragover, and ondrop. Because drag-and-drop actions are not directly supported on block and inline tags, you must use extra scripting to carry out the move or copy to the target using innerText, for example.<o:p>

You must cancel the default action for ondragenter and ondragover in order for ondrop to fire. In the case of a div, the default action is not to drop. This can be contrasted with the case of an input type=text element, where the default action is to drop. In order to allow a drag-and-drop action on a div, you must cancel the default action by specifying window.event.returnValue=false in both the ondragenter and ondragover event handlers. Only then will ondrop fire.<o:p>

<o:p> 

5.ondrag Event<o:p>

Fires on the source object continuously during a drag operation.<o:p>

6.ondragleave Event<o:p>

Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.<o:p>

7. Ondragend Event<o:p>

Fires on the source object when the user releases the mouse at the close of a drag operation.<o:p>

Sequence of event firing<o:p>

1)Ondragstart :source(ondrag, Ondragend)<o:p>

2)Ondrag :source (continuously)<o:p>

3)Ondragenter:target<o:p>

4)Ondragover:target(continuously)<o:p>

5)ondrop : target<o:p>

6)Ondragleave:target<o:p>

7)Ondragend :source

Technology used

Sample code is developed using Microsoft dot net technology C# .