Mith2000au
IS-IT--Management
Hi,
I'm using a customised version of drag-drop-custom from DHTML goodies that uses js for drag & drop functionality.
Currently any box with id ## turns green to show a successful drop on destination with id ## + 100. So if box id=15, the destination box to show success =115.
What i'd like to be able to do is have 2 draggable boxes have 2 alternate destinations. So box id 14 OR 15 turn green when dropped on destination 114 OR 115 and vice versa... i'm stumped as to how it'd be done :\
code below - any help you can provide would be greatly appreciated!
I'm using a customised version of drag-drop-custom from DHTML goodies that uses js for drag & drop functionality.
Currently any box with id ## turns green to show a successful drop on destination with id ## + 100. So if box id=15, the destination box to show success =115.
What i'd like to be able to do is have 2 draggable boxes have 2 alternate destinations. So box id 14 OR 15 turn green when dropped on destination 114 OR 115 and vice versa... i'm stumped as to how it'd be done :\
code below - any help you can provide would be greatly appreciated!
Code:
<html>
<head>
<title>Southrock HTML template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../courseware/35b4a36492e26a5bdb400b3809c12953acc2e439/SRTEST_PB-INDINDUCT_0507_01_content/content/unit_07/../css/content.css" type="text/css" rel="stylesheet" /><style type="text/css">
#mainContainer{ width:725px; margin:0 auto; margin-top:10px; border:0px solid #000; padding:2px; } #markets{ width:175px; float:left; padding:3px; height:400px; } #marketstatus{ width:175px; float:right; margin:2px; height:350px; } .dragableBox{ vertical-align:middle; width:145px; height:36px; border:1px solid #000; background-color:#FFF; margin-bottom:5px; padding:5px; font-weight:bold; text-align:center; font-size:9px } .dragableBoxRight{ width:135px; height:50px; border:1px solid #000; background-color:#FFF; margin-bottom:5px; padding:10px; font-weight:bold; text-align:center; font-size:10px } div.dragableBoxRight{ color:#FFFFFF; height:65px; width:158px; float:left; margin-right:5px; padding:5px; background-color:#116735; } .dropBox{ width:190px; border:1px solid #000; background-color:#97c03c; height:400px; margin-bottom:10px; padding:3px; overflow:auto; } a{ color:#F00; } .clear{ clear:both; } img{ border:0px; } </style><script type="text/javascript" src="../js/drag-drop-custom.js"></script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="header" colspan="2">
<h1>Who participates in our markets?</h1>
</td>
</tr>
<tr>
<td id="content">
<h2>Financial institutions cont.</h2>
<div><font face="Arial"><font size="2">Insurance companies are very active in investing, as they invest the premiums that people or organisations pay to them for the insurance policies they’ve purchased. They do this so they have enough funds to pay any claims that might be made under these policies. </font></font></div>
<div><font size="2"> </font></div>
<div><font face="Arial"><font size="2">Of course, many banks have combined with non-bank financial institutions to form financial conglomerates. For example, life and insurance companies have acquired banks, and banks have acquired fund managers and superannuation companies.</font></font></div>
<h3><br />
Task</h3>
<div><font size="2"><font face="Arial">Based on the information above about financial institutions, complete the table below:</font></font></div>
<div style="MARGIN: 0cm 0cm 0pt 36pt; TEXT-INDENT: -18pt"><span><font face="Arial" size="2">a)</font><span style="FONT: 7pt 'Times New Roman'"> </span></span><font size="2"><font face="Arial">Drag and drop the definition on the left to match the financial institution it describes.</font></font></div>
<div style="MARGIN: 0cm 0cm 0pt 36pt; TEXT-INDENT: -18pt"><span><font face="Arial" size="2">b)</font><span style="FONT: 7pt 'Times New Roman'"> </span></span><font size="2"><font face="Arial">Drag and drop the best two (2) examples of each into the next column </font></font><font size="2"><font face="Arial"><font size="2"><font face="Arial">(note that some may fall into more than one category, so use the process of elimination to select what they’d be best suited for here).</font></font></font></font></div>
<div style="MARGIN: 0cm 0cm 0pt 36pt; TEXT-INDENT: -18pt"><font size="2">c) Identify a typical product offered by each financial institution, and drag that into the third column</font></div>
<div style="MARGIN: 0cm 0cm 0pt 18pt"> </div>
<div><font size="2"><font face="Arial">You may need to do some research on these companies to establish which category they best fit into. The dragged box will go light green when you're on the money, and red when you're not. </font></font></div>
</td>
<td id="padColumn" width="180"> </td>
</tr>
</tbody>
</table>
<div id="mainContainer">
<div id="markets" style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; BORDER-BOTTOM: #000 0px solid">
<p><strong> Options</strong></p>
<div id="dropContent">
<div class="dragableBox" id="box4">Helps corporates and governments to raise funds, and act as intermediaries and end-users in trading.</div>
<div class="dragableBox" id="box14">Sell protection to businesses and people against loss.</div>
<div class="dragableBox" id="box11">Manages the money placed with it by superannuation funds or other investors.</div>
<div class="dragableBox" id="box1">A bank catering for mass customers with branches they can access. Offers savings, mortgages and credit cards.</div>
<div class="dragableBox" id="box7">A cooperative owned by its members, who are the only people that can deposit and borrow.</div>
<div class="dragableBox" id="box6">Macquarie Bank</div>
<div class="dragableBox" id="box8">Police Credit Union</div>
<div class="dragableBox" id="box12">BT Funds Management</div>
<div class="dragableBox" id="box5">JP Morgan</div>
<div class="dragableBox" id="box3">CBA</div>
<div class="dragableBox" id="box15">QBE</div>
<div class="dragableBox" id="box9">NSW Teachers Credit Union</div>
<div class="dragableBox" id="box10">AAMI</div>
<div class="dragableBox" id="box13">AMP</div>
<div class="dragableBox" id="box2">Westpac</div>
</div>
</div>
<div id="marketstatus">
<p><strong> Example 2</strong></p>
<div class="dragableBoxRight" id="box102">Retail Bank</div>
<div class="dragableBoxRight" id="box106">Investment Bank</div>
<div class="dragableBoxRight" id="box109">Credit Union</div>
<div class="dragableBoxRight" id="box113">Fund Manager</div>
<div class="dragableBoxRight" id="box110">Insurance Company</div>
</div>
<div id="marketstatus">
<p><strong> Example 1</strong></p>
<div class="dragableBoxRight" id="box103">Retail Bank</div>
<div class="dragableBoxRight" id="box105">Investment Bank</div>
<div class="dragableBoxRight" id="box108">Credit Union</div>
<div class="dragableBoxRight" id="box112">Fund Manager</div>
<div class="dragableBoxRight" id="box115">Insurance Company</div>
</div>
<div id="marketstatus">
<p><strong> Financial Institution</strong></p>
<div class="dragableBoxRight" id="box101">Retail Bank</div>
<div class="dragableBoxRight" id="box104">Investment Bank</div>
<div class="dragableBoxRight" id="box107">Credit Union</div>
<div class="dragableBoxRight" id="box111">Fund Manager</div>
<div class="dragableBoxRight" id="box114">Insurance Company</div>
</div>
<div class="clear"></div>
<div class="konaBody"></div>
</div>
<div id="debug"></div>
<script type="text/javascript">function dropItems(idOfDraggedItem,targetId,x,y){ var targetObj = document.getElementById(targetId); var subDivs = targetObj.getElementsByTagName('DIV'); if(subDivs.length>0 && targetId!='markets')return; var sourceObj = document.getElementById(idOfDraggedItem); var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1; var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; if(numericIdTarget-numericIdSource==100){ sourceObj.style.backgroundColor='#97c03c'; }else{ sourceObj.style.backgroundColor='FF0000'; } if(targetId=='markets'){ targetObj = targetObj.getElementsByTagName('DIV')[0]; } targetObj.appendChild(sourceObj); }var dragDropObj = new DHTMLgoodies_dragDrop(); dragDropObj.addSource('box1',true); dragDropObj.addSource('box2',true); dragDropObj.addSource('box3',true); dragDropObj.addSource('box4',true); dragDropObj.addSource('box5',true); dragDropObj.addSource('box6',true); dragDropObj.addSource('box7',true); dragDropObj.addSource('box8',true); dragDropObj.addSource('box9',true); dragDropObj.addSource('box10',true); dragDropObj.addSource('box11',true); dragDropObj.addSource('box12',true); dragDropObj.addSource('box13',true); dragDropObj.addSource('box14',true); dragDropObj.addSource('box15',true); dragDropObj.addTarget('box101','dropItems'); dragDropObj.addTarget('box102','dropItems'); dragDropObj.addTarget('box103','dropItems'); dragDropObj.addTarget('box104','dropItems'); dragDropObj.addTarget('box105','dropItems'); dragDropObj.addTarget('box106','dropItems'); dragDropObj.addTarget('box107','dropItems'); dragDropObj.addTarget('box108','dropItems'); dragDropObj.addTarget('box109','dropItems'); dragDropObj.addTarget('box110','dropItems'); dragDropObj.addTarget('box111','dropItems'); dragDropObj.addTarget('box112','dropItems'); dragDropObj.addTarget('box113','dropItems'); dragDropObj.addTarget('box114','dropItems'); dragDropObj.addTarget('box115','dropItems'); dragDropObj.addTarget('markets','dropItems'); dragDropObj.init(); </script>
</body>
</html>