Drag & Drop in HTML5 mit CSS und JS

Ich habe versucht, Bild in seine leere Form auf einer Webseite zu ziehen und ablegen. Daher versuche ich zuerst mit einer Box. Aber wenn ich das Bild in die Box schiebe, entsteht das Bild nicht in der Box, sondern außerhalb. Irgendwelche Ideen, was schief läuft?Drag & Drop in HTML5 mit CSS und JS

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("image"); 
    var new_img = $('#'+data).clone(); 
    $('#'+ev.target.id).html(new_img); 
    ev.target.appendChild(document.getElementById(data)); 
}

Quelle

2016-07-05 Bhimesh Chauhan

tun Sie visuell außerhalb bedeuten? oder buchstäblich draußen, wenn du auf das DOM schaust? –

optisch draußen. Als ob die neue Position automatisch überschrieben wurde. –

Dies ist wahrscheinlich eher ein CSS-Problem als JS. Stellen Sie sicher, dass Sie keine float Eigenschaft auf Ihrem Bild festgelegt haben (Sie können img {float: none !important;} zu Ihrem CSS hinzufügen und prüfen, ob es verrechnet wird).

Wenn das beweist das Problem zu sein, einen Blick auf, wie ein clearfix anwenden: What methods of ‘clearfix’ can I use?

Quelle

2016-07-05 03:16:31

Das ist wirklich hilfreich, aber das schraubt meine Bildposition, da sie die Bildposition, die ich ziehe, übersteuert. Würde ich die Bildposition in der HTML-Hilfe definieren? –

das ist nicht die Lösung. Dies war nur ein Test, um zu überprüfen, ob Floaten das Problem ist. Eine gute Lösung wäre die Anwendung eines Clearfix, das ist der Link, auf den in der Antwort verwiesen wird. Optional können Sie 'float: left' auf dem Container verwenden. –

Es tut mir leid, ich glaube ich war nicht so klar. Also, sagen wir, ich habe ein Bild benötigt, um in einer Box fallen gelassen zu werden. Jetzt früher (das Bild, das in der unteren Ecke des Bildschirms und der Box in der Mitte positioniert ist), wenn es fallen gelassen wird, wird das Bild nicht innerhalb der Box bleiben. Mit der Option float bleibt es jedoch erhalten. Nun, das Problem ist, dass das Bild nicht seine Position hält und eine Standard-Adresse von irgendwo annimmt. –

Drag & Drop in HTML5 mit CSS und JS

Antwort

Verwandte Themen