JavaScript - Klicken Sie auf ein Bild, dann klicken Sie auf ein Div, dann verschieben Sie Bild in Div

Question

Ich möchte auf ein Bild klicken, klicken Sie dann auf ein Ziel Div, dann verschieben Sie das Bild, wo das Ziel div ist.

i ist die ID des Bildes, es gibt 6 Bilder mit IDs 1 bis 6, die i entsprechen.

one_c ist das Ziel Div.

Alles funktioniert jetzt .. Danke.

function move_c(i) { 
    this.image = i; 
    one_c.setAttribute('onclick', 'move_to_one_c(image)'); 
} 

function move_to_one_c(i) { 
    document.getElementById("one_c").appendChild(document.getElementById(i)); 
    document.getElementById(i).style.zIndex = 1; 
} 

See it in action here

Answer 1

erstellen DOM-Element HTMLDOM create verwenden und die Verwendung img appendChild() Methode anhängen und die Quell-ID zuweisen. Ich habe hier einen Probeplünderer vorbereitet. Dies kann Ihnen helfen, damit zu beginnen.

var i= Obj.id; 
var elem = document.createElement("img"); 
elem.setAttribute("src", "picture1.jpg"); 
elem.setAttribute("height", "100"); 
elem.setAttribute("width", "100"); 
elem.setAttribute("alt", "Flower"); 
document.getElementById(i).appendChild(elem); 

https://plnkr.co/edit/Whan4TR3hakfx0cBXofI?p=preview

Answer 2

prüfen diese Probe heraus, es mehr oder weniger tut, was Sie gebeten, und zeigt, wie Sie es ohne ID zu benötigen Attribute auf die Bilder tun können.

var otherDiv = document.getElementById('other'); 
 
var one_c = document.getElementById('one_c'); 
 

 
var imgs = otherDiv.querySelectorAll('img'); 
 
for (var i=0; i < imgs.length; i++) { 
 
    imgs[i].addEventListener('click', move_c); 
 
} 
 

 
one_c.addEventListener('click', move_to_one_c); 
 

 
function move_c(e) { 
 
    this.setAttribute('data-selected', true); 
 
    this.className += ' picked'; 
 
} 
 

 
function move_to_one_c(e) { 
 
    var imgs = otherDiv.querySelectorAll('img[data-selected=true]'); 
 
    for (var i=0, img; img = imgs[i]; i++) { 
 
    img.setAttribute('data-selected', false); 
 
    img.className = img.className.replace(' picked', ''); 
 
    img.removeEventListener('click', move_c); 
 
    one_c.appendChild(img); 
 
    } 
 
}

#other { 
 
    height: 125px; 
 
    width: 500px; 
 
    background: navy; 
 
} 
 
#one_c { 
 
    height: 125px; 
 
    width: 500px; 
 
    background: silver; 
 
} 
 
.picked { 
 
    border: 2px outset; 
 
}

<div id='other'> 
 
    <img src='http://images.nationalgeographic.com/wpf/media-live/photos/000/129/cache/black-skimmer_12923_160x120.jpg'> 
 
    <img src='http://images.nationalgeographic.com/wpf/media-live/photos/000/126/cache/blue-eyed-ostrich_12606_160x120.jpg'> 
 
</div> 
 
<div id='one_c'></div>