Move images simulating a javascript parking [closed]

Question

Move images simulating a javascript parking [closed]

Navigation

#1 by (1 votes)

0

Good afternoon, I need your help I was asked to do a little parking in html using javascript, I do not know much about javascript but I could do something but I need to move some images that I generate asking the amount of a div to another div, I get the option to move and release them but when you release them in the other div, do not loose anything thanks

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));
}

   function img(){
   var cadena = "";
   var n1 = prompt("Dame el numero de carros ");
	for(i=0;i<n1;i++){
   cadena += "<img src='imagenes/puzzle/sedan4.png'/>";
}
contenedorAuto.innerHTML = cadena;
   }

#contenedorAuto{
  background-color: red;
  width: 75px;
  height: 150px;
}
#Estacionamiento{
  background-color: blue;;
  width: 350px;
  height: 150px;
}

<section id="contenedorEstacionamiento" ondrop="drop(event)" ondragover="allowDrop(event)">

		<h2>Por Favor Estacione los Carros<button onclick="img();">Introduzca el Numero de Carros</button></h2>
		
		<div id="contenedorAuto" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<img id="" draggable="true" ondragstart="drag(event)">

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

javascript html5

asked by Oscar Garcia 25.03.2017 в 00:52

source

1 answer

Extract image from a JPanel builtins.KeyError KeyError: 'SQLALCHEMY_TRACK_MODIFICATIONS' (Flask-python)

score 1 · Accepted Answer

Try the following code, it works according to what you need

function drag(ev) {
      console.log("dragStart");
      ev.dataTransfer.setData("text", ev.target.id);
      ev.effectAllowed = "copyMove";
   }
   function dragover(ev) {
      console.log("dragOver");
      ev.preventDefault();
   }
   function drop(ev) {
      console.log("Drop");
      ev.preventDefault();
      var id = ev.dataTransfer.getData("text");
      // copiar el element si el identificador de destino es correcto
      if (id == "auto" && ev.target.id == "Estacionamiento") {
         var nodeCopy = document.getElementById(id).cloneNode(true);
         //despues que clonamos el carro lo eliminamos..
         document.getElementById(id).remove()

         nodeCopy.id = "autoEstacionado";
         ev.target.appendChild(nodeCopy);
         document.querySelector('#Estacionamiento strong span').innerHTML = document.querySelectorAll('#Estacionamiento img').length
      }
   }
   function dragend(ev) {
      console.log("dragEnd");
      // Eliminar  datos de arrastre
      ev.dataTransfer.clearData();
   }

   function img(){
      var cadena = "";
      var n1 = prompt("Dame el numero de carros ");
      for(i=0;i<n1;i++){
         var img = document.createElement('img');
         img.id = "auto"
         img.draggable = "true"
         img.src = 'http://cdn5.dibujos.net/dibujos/pintados/201112/d6ce39e59a72ada75de877525310da2e.png';

         document.getElementById("contenedorAuto").appendChild(img);
      }
   }

div {
   margin: 0em;
   padding: 2em;
}
#autoEstacionado{
   background: #E91E63;
   width: 75px;
   height: 150px;
   margin-bottom: 5px;
}
#contenedorAuto{
   background: #fff;
   width: 75px;
   height: 150px;
   border: 1px solid blue;
}
#Estacionamiento,#dest_copy, #dest_move {
   border: 5px solid blue;
   width: 300px;
   height: 50;
}
img{
   width: 30px;
   height: 30px;
}

   <section>

      <h2> Por Favor Estacione los Carros</h2>
      <button onclick="img();">Introduzca el Numero de Carros</button>

      <div   id="contenedorAuto" ondragstart="drag(event);" ondragend="dragend(event);">
         <strong>auto</strong>
      </div>

      <div id="Estacionamiento" ondrop="drop(event);" ondragover="dragover(event);">
         <strong>vehiculos sestacionamiento <span>0</span></strong>

      </div>

   </section>