Download sourcecode

Introduction

In article "How to Drag Drop in javascript (Part I)", we have seen how to drag and drop objects. Now consider that there is requirement to drag some object from one frame and drop it to another frame.Also clicking on particular slide (image object)we need to maximize that slide .This document explains how to achieve this using javascript.

 

How to Drag Drop in javascript (Part I) is available at

http://www.codeproject.com/useritems/DragDrop_Part-1_.asp

Approach

Since object which will be dragged and dropped to different frames we need to store Id of object at common place which will be accessible from both frames.Best place is to store these Ids in container of frames .

Sample Code

Consider that we declare two varaibles in container frame as follows.

   

var srcElementId; //Id of dragged object

var destElementId; //Id of valid drop target object 

 

Now we can set or get these variables in child frame.Container frame can be accessed using parent object.

 

e.g

function fnGetSource()

{

   parent.srcElementId = event.srcElement.id ;

}  

 

Here we are setting dragged object id to variable declared in parent frame container.

   

Sample Application

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.