Simple HTML 5 Drag and Drop

**Shammus** · 10-09-2012, 09:53 PM

I was working on a simple drag and drop script which allows you to take any of four statements wrapped in <p> tags and drag/drop them into a larger rectangle up above. That rectangle then changes to whatever background color the <p> tag corresponds to. So if you drag the "This is the color red" <p> tag into the rectangle, the background color of the rectangle should change to red.

I feel I'm really close with this but haven't gotten it working just yet. Can anyone take a look for me and point me in the right direction? All necessary code is below. Thanks in advance....

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Drag and Drop</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />
		<meta name="apple-mobile-web-app-capable" content="YES" />

		<script type="text/javascript">
        function allowDrop(ev)
        {
        ev.preventDefault();
        }
        
        function drag(ev)
        {
        ev.dataTransfer.setData("Text",ev.target.id);
        }
        
		
		function drop(ev, ui)
        {
        ev.preventDefault();
		//var data=ev.dataTransfer.getData("Text");
		//ev.target.appendChild(document.getElementById(data));
		var draggableId = ui.draggable.attr("id");
		
			if (draggableId == 'drag1') {
				document.getElementById('div1').style.background = "red";
			}
			
			else if (draggableId == 'drag2') {
				document.getElementById('div1').style.background = "orange";
			}
			
			else if (draggableId == 'drag3') {
				document.getElementById('div1').style.background = "green";
			}
			
			else if (draggableId == 'drag4') {
			document.getElementById('div1').style.background = "blue";
			}
				
        }
	
	
        </script>
        
        <style>
			#div1 {height:200px; width:400px; border:2px solid red;}
			p {font-weight:bold; width:200px;}
			p:nth-of-type(1) {color:red;}
			p:nth-of-type(2) {color:orange;}
			p:nth-of-type(3) {color:green;}
			p:nth-of-type(4) {color:blue;}
		</style>
        
        </head>


        <body>
            
            <div id="div1"  ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            
            <p id="drag1" draggable="true" ondragstart="drag(event)" >This is the color red</p>
            <p id="drag2" draggable="true" ondragstart="drag(event)" >This is the color orange</p>
            <p id="drag3" draggable="true" ondragstart="drag(event)" >This is the color green</p>
            <p id="drag4" draggable="true" ondragstart="drag(event)" >This is the color blue</p>

            
        </body>
</html>

**bernie1227** · 10-09-2012, 11:51 PM

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Drag and Drop</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />
		<meta name="apple-mobile-web-app-capable" content="YES" />

		<script type="text/javascript">
        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));
			if(document.getElementById(data).id == 'drag1'){
				document.getElementById('div1').style.background = 'red';
			}
			else if(document.getElementById(data).id == 'drag2'){
				document.getElementById('div1').style.background = 'orange';
			}
			else if(document.getElementById(data).is == 'drag3'){
				document.getElementById('div1').style.background = 'green';
			}
			else if(document.getElementById(data).id == 'drag4'){
				document.getElementById('div1').style.background = 'blue';
			}
				
        }
	
	
        </script>
        
        <style>
			#div1 {height:200px; width:400px; border:2px solid red;}
			p {font-weight:bold; width:200px;}
			#drag1 {
			color: red;
			}
			#drag2 {
			color: orange;
			}
			#drag3 {
			color: green;
			}
			#drag4 {
			color: blue;
			}
		</style>
        
        </head>


        <body>
            
            <div id="div1"  ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            
            <p id="drag1" draggable="true" ondragstart="drag(event)" name="red">This is the color red</p>
            <p id="drag2" draggable="true" ondragstart="drag(event)" name="orange">This is the color orange</p>
            <p id="drag3" draggable="true" ondragstart="drag(event)" name="green">This is the color green</p>
            <p id="drag4" draggable="true" ondragstart="drag(event)" name="blue">This is the color blue</p>

            
        </body>
</html>

**Shammus** · 10-10-2012, 02:48 PM

Hey Bernie -

That worked great! Was exactly what I needed. I tweaked two small things. I commented out the "ev.target.appendChild(document.getElementById(data));" line so that the <p> tag elements will remain in place after they are dragged. I also fixed a tiny proofreading item in the "else if" line for the green background. Changed "is" to "id".

Thank you for your help, much appreciated!