Html5 Drag And Dropjavascript Problem

JavaScript
1

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

<!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.sitepoint.com/forums/images/styles/TheBeaconLight/style_blue/sitepoint.svg" 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.sitepoint.com/forums/images/styles/TheBeaconLight/style_blue/sitepoint.svg" 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

Hi,

Welcome to the forums :slight_smile:

Was there a question in there?

3

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

4

This functionality is available in numerous plugins.
In light of the fact that you said you were new to JavaScript (in your previous post before editing it) is there any reason you are trying to program it yourself ?

5

i searched for many drag and drop plugins but didn’t find the exact functionality in any . thanks for you quick response :slight_smile:

6

Ok, what is the functionality you are looking for?

7

i am using drag and drop script here . In this user can drag a image into div box . right now user can put two images in the div box i want to lock the div box so user can’t insert more then 1 image in the box

8

I just came up with solution :slight_smile: thanks


<!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;}
#div3 {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(ev.currentTarget.innerHTML == "") {
	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>

<br>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

<img id="drag2" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

<img id="drag3" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>