www.webdeveloper.com
Results 1 to 3 of 3

Thread: Html5 Drag And Drop Problem

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    Post Html5 Drag And Drop Problem

    I am basically trying to create a drag and drop. and i came up with this

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #my1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #my2 {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();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    
    
    </script>
    </head>
    <body>
    
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    
    
    <div id="my1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69">
    </div>
    
    <br>
    
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    <div id="my2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag2" src="http://www.w3schools.com/html/img_logo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69">
    </div>
    </body>
    </html>
    it is currently allowing user to put 2 images in 1 div. what i want is this if the user already drag the image in the div then div will not allow the user to insert another image in it..One image in one div at a time will be a better script... Please help i am new to javascript

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,016
    There are a couple of ways you can fix this. Ultimately you need to check the target to make sure nothing is in the <div> before you move the image. The first way to do this is with .innerHTML.
    Code:
    	function drop(ev) {
    		ev.preventDefault();
    		var data = document.getElementById(ev.dataTransfer.getData("Text"));
    		if(ev.currentTarget.innerHTML == "") {
    			data.parentNode.innerHTML = "";
    			ev.target.appendChild(data);
    		}
    	}
    The second method (essentially the same) would be to check the number of childNodes in the target to make sure the <div> is empty:
    Code:
    	function drop(ev) {
    		ev.preventDefault();
    		var data = document.getElementById(ev.dataTransfer.getData("Text"));
    		if(ev.currentTarget.childNodes.length == 0) {
    			data.parentNode.innerHTML = "";
    			ev.target.appendChild(data);
    		}
    	}
    It seemed like I needed to also clear the <div> by setting the .innerHTML to an empty string when moving the image otherwise a value gets left behind in the <div> (seemed to be a blank string of 3 characters/spaces?). I also needed to use the currentTarget to check the values of the <div> to which we were moving the image.

  3. #3
    Join Date
    Mar 2014
    Posts
    2
    Thanks a lot for your respond i just came up with solution in a light of your code

    HTML Code:
    function drop(ev) {
    		ev.preventDefault();
    		if(ev.currentTarget.innerHTML == "") {
    	var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    		}
    	}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles