eye4see
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by eye4see
-
Thank you all for the help. Although the addition of a variable to update and adding if statement to drop function works, it also causes all the drop targets to become non-drop targets. Thanks Newbie for this code: if(ev.currentTarget.innerHTML == "") { } Although I have not researched the innerHTML property yet, that did the trick. So once you drop on a target, that target's innerHTML property get set to some value, and ultimately blocking other objects from being dropped on that target again.
-
Seems like nobody understand what my problem is. The drag and drop function works perfectly well. But all the samples and code provided only deals with one drag object and one drop target. My problem is that I have 4 drag objects and 4 drop targets. If you run my code you will notice that you can drag all 4 drag objects onto the same div tag drop target. The div tag just keep on expanding till you have dropped all 4 objects onto the same drop target. This should not happen. Once a drop has been made you must not be able to drop another object onto the same target. I have been posting on several forums and nobody can give me a sullotion.
-
I have a 4 drag options <a>, and 4 drop targets <div>. The problem is that I can drop all 4 drag objects into the same <div> drop target. The div just expands as I drop more objects onto it. I need to disable the drop target as soon as a object being dropped. See below 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){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(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } }else{ document.write('Sorry, your browser does not support drag and drop'); }var contents=new Array(); contents[0]='<a id="drag1" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 1</a>' contents[1]='<a id="drag2" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 2</a>' contents[2]='<a id="drag3" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 3</a>' contents[3]='<a id="drag4" draggable="true" style="cursor:pointer;" ondragstart="drag(event)" >Drag 4</a>'</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[random]!="selected"){ document.write(contents[random]+spacing) <!--mark element as selected--> contents[random]="selected" i++ }} </script></div><div id="submit"> <img id="submit" src="images/submit.png" style="cursor:pointer;"></div></body></html>