drag and drop disable a div

cathiec · Dec 5, 2003

I have a drag and drop game. Images are dragged onto a table with divisions. If the correct image is dragged over the correct div then a message saying well done is alerted and the background color of the div is changed to the background color of the page so that the text in the div can no longer be seen. if another image is dragged over the div then the color is changed to the color set when an image is dragged over a div. Is there any way to disable the div so that when the correct image is placed on the correct div then the div no longer is active and other images cannot be dragged over it? here is the code:

<html>
<head>
<title>Animal Drag and Drop Game</title>

<style type = "text/css">



</style>

<body bgcolor = "#CC3300">

<script language = "JavaScript">

//time functions start, stop and update timer for the game
var timerID = 0;
var tStart = null;

function UpdateTimer() {
if(timerID) {
clearTimeout(timerID);
clockid = 0;
}

if(!tStart)
tStart = new Date();

var tDate = new Date();
var tDiff = tDate.getTime() - tStart.getTime();

tDate.setTime(tDiff);

document.theTimer.theTime.value = ""
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();

timerID = setTimeout("UpdateTimer()", 1000);
}

function Start() {

tStart = new Date();

document.theTimer.theTime.value = "00:00";

timerID = setTimeout("UpdateTimer()", 1000);
}

function Stop() {
if(timerID) {
rawtime = document.theTimer.theTime.value;
calculatemins = document.theTimer.theTime.value.substring(0,2);
calculatesecs = document.theTimer.theTime.value.substring(2,5);
var actualmins = calculatemins.substring(0,1)

alert('Congradulations!! It took you '+actualmins+ ' minutes and '+calculatesecs+' seconds to finish the game.Your score is: '+counter);

clearTimeout(timerID);
timerID = 0;
}

tStart = null;
document.theTimer.theTime.value = "00:00"
counter = 0;
window.location.reload();

}

//change the background colour of the division in the table to cream when an image is
//dragged over it
function doOverTarget() {
elDragged.overTarget.style.background="#FBEADC"
}

//when an image is dragged over a division and then dragged to a new dvision in
//the table or outside the table then change the colour of the division back to white
function doOutTarget() {
elDragged.overTarget.style.background="white"
}

var counter = 0;

//check to see if the correct image is on the correct division in the table

function TestNumber(l)
{

var imageText= elDragged.innerHTML;
var num = imageText.indexOf(".gif&quot

;
var tempId = imageText.substring(num-5, num);
if (tempId == (l))
{ alert('Well Done!!')
elDragged.overTarget.style.background="#CC3300";

counter++;

}
else
{ alert('Try again!!')
counter--;
}

}

//image that is currently being dragged
var elDragged = null

function testOver(iLeft, iTop) {
// Test if the image is over a valid drop-area
var hit = false
if (elDragged.getAttribute("dropTarget&quot

!=null) {
for (var intLoop=0; intLoop<elDragged._targets.length; intLoop++) {
// Check all drop-areas
var el = elDragged._elTargets[intLoop]
if (null!=el) {
if ((iTop > el._top) && (iLeft > el._left) && (iLeft+elDragged.offsetWidth < el.offsetWidth+el._left) && (elDragged.offsetHeight+iTop < el.offsetHeight+el._top)) {
elDragged.overTarget= el
var hit=true
elDragged._over[intLoop] = true

if (event.type=="mouseup&quot

{
if (el.getAttribute("onDropTarget&quot

!=null)
eval(el.getAttribute("onDropTarget&quot

);
} else
{
if (el.getAttribute("onOverTarget&quot

!=null)
eval(el.getAttribute("onOverTarget&quot

)
}
}
else {

if ((el.getAttribute("onOutTarget&quot

!=null) && (elDragged._over[intLoop])) {
elDragged.overTarget= el
eval(el.getAttribute("onOutTarget&quot

)
}
elDragged._over[intLoop] = false
}
}
}
}
return hit;
}

//function performed on mouse up

function doMouseUp() {
if (elDragged!=null)
if (testOver(elDragged._left, elDragged._top)) {

if (elDragged.getAttribute("onTarget&quot

)
eval(elDragged.getAttribute("onTarget&quot

)
}
else
if (elDragged.getAttribute("onNoTarget&quot

)
eval(elDragged.getAttribute("onNoTarget&quot

)

elDragged=null
}

//function performed when mouse button is down and an element is being dragged

function doMouseMove() {
if ((1 == event.button) && (elDragged != null)) {
// Set new position
var intTop = event.clientY+document.body.scrollTop;
var intLeft = event.clientX + document.body.scrollLeft;
elDragged.style.pixelTop = intTop - elDragged._lessTop - elDragged.y;
elDragged.style.pixelLeft = intLeft - elDragged._lessLeft - elDragged.x;
// Cache updated info
elDragged._left = elDragged._lessLeft + elDragged.offsetLeft + document.body.scrollLeft
elDragged._top = elDragged.offsetTop+ elDragged._lessTop +document.body.scrollTop
// Test if over target
testOver(elDragged._left, elDragged._top)
event.returnValue = false;
};
};

//make sure that the element clicked on supports dragging
function checkDrag(elCheck) {
while (elCheck!=null) {
if (null!=elCheck.getAttribute("dragEnabled&quot

)
return elCheck
elCheck = elCheck.parentElement
}
return null
}

// On the mouse down, test if element can be dragged

function doMouseDown() {

var elCurrent = checkDrag(event.srcElement)
// For draggable elements, cache all calculations up front. This is for performance.
if (null!=elCurrent) {
elDragged = elCurrent;
// Determine where the mouse is in the element
elDragged.x = event.offsetX
elDragged.y = event.offsetY
// Make sure we are using pixel units everywhere
elDragged.style.top = elDragged.offsetTop + "px"
elDragged.style.left = elDragged.offsetLeft + "px"
var op = event.srcElement
// Find real location in respect to element being dragged.
if ((elDragged!=op.offsetParent) && (elDragged!=event.srcElement)) {
while (op!=elDragged) {
elDragged.x+=op.offsetLeft
elDragged.y+=op.offsetTop
op=op.offsetParent
}
}

// Move the element
// Where the mouse is in the document
// Calculate what element the mouse is really in
var intLessTop = 0; var intLessLeft = 0;
var elCurrent = elDragged.offsetParent;
while (elCurrent.offsetParent!=null) {
intLessTop+=elCurrent.offsetTop;
intLessLeft+=elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
elDragged._lessTop = intLessTop
elDragged._lessLeft = intLessLeft
// Calculate and cache target information
if (null!=elDragged.getAttribute("dropTarget&quot

) {
elDragged._targets = elDragged.getAttribute("dropTarget&quot

.split(",&quot

elDragged._over = new Array
elDragged._elTargets = new Array
for (var intLoop=0; intLoop < elDragged._targets.length; intLoop++) {
var el = document.all[elDragged._targets[intLoop]]
if (null!=el) {
elDragged._elTargets[intLoop]= el;
var intLessTop = el.offsetTop; var intLessLeft = el.offsetLeft;
var elCurrent = el.offsetParent;
var intTop = document.body.scrollTop;
var intLeft = document.body.scrollLeft;
while (elCurrent.offsetParent!=null) {
intLessTop+=elCurrent.offsetTop;
intLessLeft+=elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
el._top = intLessTop + intTop
el._left = intLessLeft + intLeft
}
}
}
}
}

// Process all mouse events.
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = doMouseUp;

//array of all the images in the game

var Pictures = new Array;
Pictures[0] = '00001.gif';
Pictures[1] = '00002.gif';
Pictures[2] = '00003.gif';
Pictures[3] = '00004.gif';
Pictures[4] = '00005.gif';
Pictures[5] = '00006.gif';
Pictures[6] = '00007.gif';
Pictures[7] = '00008.gif';
Pictures[8] = '00009.gif';
Pictures[9] = '00010.gif';

//shuffle the images using a random number so that a new combination
//occurs each time the shuffle button is pressed
function shuffle()
{

for(i = 0;i<10;i++)
{
Pictures = Pictures.sort(getRandomNumber);
for(x = 0; x<10; x++)
{
document.images[x].src = Pictures[x];
document.images[x].style.top = 500;
document.images[x].style.pixelLeft = 5;
}

document.images[5].style.top = 500;
document.images[5].style.pixelLeft = 5;
}
}

function getRandomNumber()
{
return Math.floor(Math.random() * 10)-1;

}

</script>



<div id = "00001" style =" position:absolute;left:50;top:150;" dragEnabled dropTarget = "dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00001.gif" width = 250em height = 75em align = "center">
</div>

<div id = "00002" style = "position:absolute;left:50;top:150; position: absolute" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00002.gif" width = 250em height = 75em align = "center">
</div>

<div id="00003" style="position:absolute;left:50;top:150;" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00003.gif" width = 250em height = 75em align = "center">
</div>

<div id="00004" style ="position:absolute;left:50;top:150;" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00004.gif" width = 250em height = 75em align = "center">
</div>

<div id = "00005" style = "position:absolute;left:50;top:150;" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00005.gif" width = 250em height = 75em align = "center">
</div>

<div id = "00006" style = "position:absolute;left:50;top:150;" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00006.gif" width = 250em height = 75em align = "center">
</div>

<div id="00007" style = "position:absolute;left:50;top:150;" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00007.gif" width = 250em height = 75em align = "center">
</div>

<div id = "00008" style = "position:absolute;left:50;top:150;" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00008.gif" width = 250em height = 75em align = "center">
</div>

<div id = "00009" style = "position:absolute;left:50;top:150;" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00009.gif" width = 250em height = 75em align = "center">
</div>

<div id = "00010" style = "position:absolute;left:50;top:150;" dragEnabled dropTarget="dropAnimal,dropAnimal2,dropAnimal3,dropAnimal4,dropAnimal5,dropAnimal6,dropAnimal7,dropAnimal8,dropAnimal9,dropAnimal10,dropAnimal11,dropAnimal12">
<img src = "00010.gif" width = 250em height = 75em align = "center">
</div>


<input type = "button" name = "button1" value = "Shuffle" onClick = "shuffle()">



<div id = dropAnimal style = "position: absolute; top: 50;left: 405; width: 290; height: 7em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00006')">
</div>

<div id = dropAnimal2 style = "position: absolute; top: 50;left: 695; width: 290; height: 7em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00001')">
</div>

<div id = dropAnimal3 style = "position: absolute; top: 160;left: 405; width: 290; height: 5.5em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00005')">
</div>

<div id = dropAnimal4 style = "position: absolute; top: 160;left: 695; width: 290; height: 5.5em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00003')">
</div>

<div id = dropAnimal5 style = "position: absolute; top: 248;left: 405; width: 290; height: 5em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00007')">
</div>

<div id = dropAnimal6 style = "position: absolute; top: 248;left: 695; width: 290; height: 5em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00004')">
</div>

<div id = dropAnimal7 style = "position: absolute; top: 328;left: 405; width: 290; height: 12em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00010')">
</div>

<div id = dropAnimal8 style = "position: absolute; top: 328;left: 695; width: 290; height: 12em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00009')">
</div>

<div id = dropAnimal9 style = "position: absolute; top: 515;left: 405; width: 290; height: 6.2em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00008')">
</div>

<div id = dropAnimal10 style = "position: absolute; top: 515;left: 695; width: 290; height: 6.2em; border: 1pt black solid; z-index: -1; background: white" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget= "TestNumber('00002')">
</div>


<table border = 5 align = right width = 60% cellpadding = 12 cellspacing = 2.5 >
<tbody>
<tr>
<td width = 50%>This theory stresses initial disparities and the rigidity of the system, pointing out that under such conditions the free play of market forces is bound to lead to an unbalanced regional growth.</td>
<td width = 50%>This policy is a policy that tries to address regional imbalances that have occurred over time.</td>
<tr>
<td width = 50% >This theory suggests that similar economic activities regularly tend to concentrate in the same locations.</td>
<td width = 50% >This theory views development as a succession of stages through which all economies must pass to become ‘developed’.</td>
</tr>
<tr>
<td width = 50% >This theory is based on the idea that demand in a given region is the summation of domestic, export and import demand.</td>
<td width = 50%>This theory is interested in the workings of the political economy.</td>
</tr>
<tr>
<td width = 50%>This theory suggests that regions go through stages of structural change - from an economy initially dominated by primary sector, to one characterised by secondary sector dominance, to the prevalence of tertiary sector production.</td>
<td width = 50%>This theory believes that if the market is able to operate freely, it will automatically bring about economic development and is based on four major assumptions - free competition and market entry, full employment of factors of production (labour and capital), full mobility of labour and capital, and common level of technology.</td>
</tr>
<tr>
<td width = 50%> This theory is used to explain regional specialisation in the production of certain goods, and inter-regional and international trade.</td>
<td width = 50%>This policy can be defined as all aspects of State action that, directly or indirectly, influences the nature of economic and social development in rural areas.</td>
</tr>
</tbody>
</table>

</body>
</html>

skosterow · Feb 17, 2005

cathiec,

Im looking to do something simular to this except it would be with images.

IE you have an image as a base: IMAGE01.gif and on that image there are 1 to 3 different places that the user can place a drag and drop image.... these being marked as placement_a, placement_b, placement_c etc....

Then the user would have an assortment of image say 3 of them on the side that they can place onto the first image. After the user places them and hits sumbit - the form sends say some data back to the server - IE

placement_a - image04.gif (or some letter assignment)
placement_b - image02.gif (or some letter assignemnt)
placement_c - image03.gif (or some letter assignment)

I can write the piece that checks if the user placed the images correctly.

Let me try to explain what im doing: im writting a perl /MySQL based testing center for my company - and for your help im willing to share the code, in its entirety - I would like to add a drag and drop question / answer to this. It will be used in corporate testing for new IT people.

so the question would look something like this:

#---------------------------------
Scenario:
Image of 3 pc's and 1 printer connected to a box with a question mark in it.

Question:
You would like to connect all devices together; You do not care about network traffic, or subnetting. What device would you use?

Possible anwers:
Image 1 - Hub
Image 2 - Router
Image 3 - Switch

#---------------------------------
In the above example - there would only be one image to place in one space - and the code should return an answer upon form submission: IE if Image 1 value is A, Image 2 value is B, Image 3 value is C etc..... when the user hit submit the place holder for the answer would return Answer #1 = A B or C depending on what the user placed in the answer box.

If you have ever taken an exam at a VUE testing center im sure you know what i mean.

Thanks in advance.

- Scott

Wise men ask questions, only fools keep quite.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

drag and drop disable a div

cathiec

Programmer

skosterow

Technical User

Similar threads

Part and Inventory Search

Sponsor