Intercambiar imagenes en div

[jdelaossam]

Comunidad, me pregunto como realizar lo siguiente.

Quisiera tener varios div y poder seleccionar uno de estos y cambiarle el contenido por uno que tenga otro div, algo asi como tener 10 divs en una seccion y 5 mas con algunas imagenes y al seleccionar uno de los 10 luego poder seleccionar uno de los 5 y asignar lo que tenga el 5 al que fue previamente seleccionado entre los 10, no se si me explique bien...

seria algo asi como si cada uno de los 10 div fuera un radio que me permitiese saber si fue seleccionado y luego aplicarle el cambio, lo he pensado (aun no me he puesto en el code) modificando algun campo hidden mediante js que me permita saber que div fue seleccionado y luego a partir de esto modificar el contenido...

aunque claro despues debo saber que tiene cada div para enviarlo a una bd...



Tenia pensado usar este js
http://www.ajaxshake.com/es/JS/232931/poner-imagenes-en-selects-html-con-javascript-image-dropdown.html

pero luego por cada opcion no me parecería poco estetico, si tienen algun enlace en el que pueda leer al respecto les agradeceria.

Tambien considere la opcion de drag and drop, pero por simplicidad me gustaria mejor la opcion planteada

Muchas Gracias

[autonotel]

Si lo que quieres hacer lo sabes hacer con drag & drop no deberías tener problemas:
Creas una función que le da un valor a una variable que es el nombre del id del div de los 10 que acabas de pulsar. Y en la función del drop utilizas esa variable que ya tendrá el valor del id del div que se va a modificar (me imagino que es un innerHTML) de modo que en lugar de arrastrar la función se hace con clic desde el div de los 5.
function iddeldivdelos10(vari) {
var iddiv = vari;
}
function loquehaceeldrop(){
document.getElementById(iddiv).innerHTML="blabla";
}

<div id="div7" onclick="iddeldivdelos10(div7)"></div>
<div id="divdelos5-3" onclick="loquehaceeldrop()"></div>

No me he fijado mucho en las comillas.

O bien si lo que quieres es trasladarlo le envías a iddeldivdelos10() los datos de top y left y con el clic en el div entre 5 le envías el id del div que mueves...

Por ejemplo.
Si quieres especificar un poco más...

[jdelaossam]

Muchas gracias por tu respuesta , he implementado una solucion similar a lo que planteas usando una variable , lo dnd pues la cosa es que aunque el evento es muy agradable el tener que obligar a un usuario a estar arrastrando y llevando de un lado a otro no lo es tanto...

En ligar de div he usado imagenes... para la seccion de los valores que luego voy a almacenar en la bd, estoy pensando en un atributo value dentro de la etiqueta img que luego recogeré con alguna funcion.

La solucion parcial que he implentado es la siguiente

Código Javascript:

var seleccionado="";
 
  jQuery(document).ready(function($) {
    
    jQuery("#odontograma img").bind("click", function(){
      
      var datai=$(this).attr('id');
      seleccionado=datai;
 
    });
    
    jQuery("#convencion img").bind("click", function(){
            var ruta="";
            //alert(seleccionado);
            if(seleccionado){
                ruta=$(this).attr("src");
                $("#"+seleccionado).attr("src",ruta);
            }else{
                alert("Debe seleccionar una pieza dental"); 
                }                                           
        
        });
 
  });
 

[autonotel]

Exacto, también te iba a sugerir que utilizaras jquery por supuesto.
Lo único que debes tener en cuenta es si quieres que la imagen arrastrada (bueno, enviada) permanezca donde estaba (se copie) o se desplace.
En el if (seleccionado) será donde metas la función ajax etc no?

[jdelaossam]

En esa zona no voy a usar ajax, esa parte la voy a implementar en otra funcion js, esta parte es solo para que el usuario observe las modificaciones que este realizando sobre las imagenes seleccionadas.

Por otro lado cuando tenia el codigo anterior en html funcionaba normar, al momento de pasarla a php e intentar implementarla se me ejecutava varias veces la la funcion, supongo que por usar el bind, asi que implemente algo de lo que ya me habias comentado...

quedando actualmente asi:

Código Javascript:

var seleccionado="";
 
  function Seleccionar(id){     
      seleccionado=id;           
  }
  function Odonto(id) {     
    
        var ruta="";
        //alert(seleccionado);
        if(seleccionado){
                ruta=jQuery("#"+id).attr("src");
                jQuery("#"+seleccionado).attr("value",id);
                jQuery("#"+seleccionado).attr("src",ruta);
        }else{
                alert("Debe seleccionar una pieza dental");//solo se cumple cuando se intenta agragar opciones sin a ver seleccionado previamente un pieza
                }                               //esto deberia ocurrir solo una vez
    
  }