Jump to content

Drag and drop HTML5

eye4see

By eye4see
in HTML/XHTML

 Share

Recommended Posts

eye4see Newbie

eye4see

Posted
Posted

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>

Link to comment
Share on other sites
  • 3 weeks later...
davej Devoted Member

davej

Posted
Posted

See...

http://www.w3schools.com/html/html5_draganddrop.asp

 

Example modified slightly...

<!DOCTYPE HTML><html><head><style>#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style><script>function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();if (document.getElementById('candrop').checked==true){var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}}</script></head><body><p>Drag the W3Schools image into the rectangle:</p><input type="checkbox" id="candrop"/>Can Drop<br/><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"></body></html>
Link to comment
Share on other sites
eye4see Newbie

eye4see

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

Well, did you look at the example I posted above? It shows that the drop-zone can be easily disabled, so all you have to do is keep counter values for each drop-zone and then disable the drop-zone when that particular count reaches your maximum.

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

It seems that you can either regulate the "allow drop" function or regulate the "drop" function...

<!DOCTYPE HTML><html><head><style>#div1 {width:350px;height:100px;padding:10px;border:1px solid #aaaaaa;}</style><script>window.onerror = function(m, u, l){  alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);  return true; //supress fallback error-msg if true}</script><script>function allowDrop(ev){if (div1cnt < 4){ev.preventDefault();}}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);out1.innerHTML += 'drag ';}function drop(ev){ev.preventDefault();if (div1cnt < 3){ if (ev.target.id=='div1'){var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));div1cnt++;out1.innerHTML += '[drop div1 cnt='+ div1cnt +']';}else{out1.innerHTML += '[FAIL:bad location] ';}}}</script></head><body><p>Drag the W3Schools image into the rectangle:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="120" height="50"><img id="drag2" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="120" height="50"><img id="drag3" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="120" height="50"><img id="drag4" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="120" height="50"><br/><br/><div id="out1"></div><script>var out1 = document.getElementById('out1');out1.innerHTML = 'OUTPUT: ';var div1cnt = 0;</script></body></html>

Which can be pasted into the textbox here...

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

Link to comment
Share on other sites
koolrock75 Newbie

koolrock75

Posted
Posted

i just came up with this code..

<script>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");ev.target.appendChild(document.getElementById(data));		}	}</script>
Link to comment
Share on other sites
eye4see Newbie

eye4see

Posted
  • Author
Posted

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...