Jump to content

drag en drop images . in form too


paul1968
 Share

Recommended Posts

Hello everybody. I am not really familiar with javascript. However I found the below script where you can drag en drop a image  to a div in both directions.  My goal however is to choose one image from multiply images and drag them to a specific div The original script is:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
</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>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

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

</body>
</html>

I changed the above script with 3 images.  but this way I can drag images over another image and it then vanishes! my goal is that the images only can be dropped to one div or back to his original div. For example. div 1 can drag and dropped to div 3 or back to div 1.  div 2 can drag and dropped to div 3 or back. But div 1 may nog be dropped on div 2!

My goal of this all is to put all together in a form which the visitor sent to me. thanks all for your input.

 

!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2, #div3 {
  float: left;
  width: 400px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
</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>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="headerkeuze1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="400" height="200">
</div>


<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="headerkeuze2.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="400" height="200">
</div>

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

</body>
</html>

 

 

 

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

×
×
  • Create New...