JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!



Repositioning Object with submit button


J

keyboard_arrow_up
0
keyboard_arrow_down


First Post Mark as Spam janjansen-van-rensburg
Posts: 1 - Registered: 2014-03-27 06:57:54

I am busy building a basic drag and drop in HTML5 with JavaScript. I got all the elements working. I only need to reset the objects that was dragged to wrong target back to their original position.

Drag Objects are stored in Array:
var contents=new Array();
contents='<a id="drag1" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 1</a>'
contents='<a id="drag2" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 2</a>'
contents='<a id="drag3" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 3</a>'
contents='<a id="drag4" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 4</a>'

Once I submit:
for(i=0;i<pairing.length;i++){
if(pairing=="noMatch"){
alert(i+1)
}

The alert works perfectly fine to indicate the incorrect drops.
However I thought I could just reset the incorrect drag objects by doing:
contents.x=20;
or something to that effect
Not even contents.x=20 works on submit.

Please let me know what I am doing wrong. Below is the complete code:

<!doctype html>
<html lang="en">
<head>
<style>
#div1 {position:absolute;top:42px;left:80px;width:90px;height:15px;}
#div2 {position:absolute;top:141px;left:16px;width:90px;height:15px;}
#div3 {position:absolute;top:444px;left:24px;width:90px;height:15px;}
#div4 {position:absolute;top:425px;left:362px;width:90px;height:15px;}
#options{position:absolute;top:30px;left:800px;}
#submit{position:absolute;top:250px;left:10px;}

#drag1{float:left;}
#drag2{float:left;}
#drag3{float:left;}
#drag4{float:left;}

</style>

<script type="text/javascript" src="modernizr.custom.38894.js"></script>
<script type="text/javascript">
if(window.FileReader && Modernizr.draganddrop){

var pairing=new Array();

function dragEnter(ev) {
event.preventDefault();
return true;
}

function allowDrop(ev){
ev.preventDefault();
}

function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev){
ev.preventDefault();
if(ev.currentTarget.innerHTML == ""){
var data = ev.dataTransfer.getData("Text");
var dataSub=data.substring(4,5)
ev.target.appendChild(document.getElementById(data));
target=ev.target.id;
targetSub=target.substring(3,4);

}

if(dataSub==targetSub){
pairing="match";
}else{pairing="noMatch"}



}
}else{
document.write('Sorry, your browser does not support drag and drop');
}


var contents=new Array();
contents='<a id="drag1" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 1</a>'
contents='<a id="drag2" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 2</a>'
contents='<a id="drag3" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 3</a>'
contents='<a id="drag4" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 4</a>'

function submit(){
contents.x=20;

for(i=0;i<pairing.length;i++){
if(pairing=="noMatch"){
alert(i+1)
}
}
}

</script>

</head>

<body>

<img src = "images/background.png"
alt = "Systemblock Image" />

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)"></div>

<div id="options">
<script>
var i=0
<!--variable used to contain controlled random number-->
var random
var spacing="<br>"
<!--while all of array elements haven't been cycled thru-->
while (i<contents.length){
<!--generate random num between 0 and arraylength-1-->
random=Math.floor(Math.random()*contents.length)
<!--if element hasn't been marked as "selected"-->
if (contents!="selected"){
document.write(contents+spacing)
<!--mark element as selected-->
contents="selected"
i++
}
}
</script>

</div>

<div id="submit">

<button id="submit"type="submit" style="cursor:pointer;" onclick="submit()">Submit</button>
</div>

</body>

</html>






JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!




MENU
Advertising