Results 1 to 3 of 3

Thread: Simple HTML 5 Drag and Drop

  1. #1
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default Simple HTML 5 Drag and Drop

    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>
    Last edited by Shammus; 10-09-2012 at 10:01 PM.

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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>
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. The Following User Says Thank You to bernie1227 For This Useful Post:

    Shammus (10-10-2012)

  4. #3
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    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!

Similar Threads

  1. Using a drag and drop script with a drop down menu
    By weirddemon in forum JavaScript
    Replies: 2
    Last Post: 05-12-2008, 06:31 AM
  2. Integrating Drag & Drop w/ Drop Down menu
    By weirddemon in forum JavaScript
    Replies: 3
    Last Post: 05-10-2008, 05:25 AM
  3. DOM Drag & Drop script - Flash Drag Problem
    By rudamaia in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-13-2008, 01:08 PM
  4. Simple Drag-Drop for Firefox
    By Usagi in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-19-2006, 07:24 AM
  5. Drag and drop photos from drop down menu
    By swtgoddess in forum JavaScript
    Replies: 0
    Last Post: 02-28-2006, 05:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •