mit - javascript objekte bewegen



Wie verschiebt man ein Element in ein anderes Element? (8)

Ich möchte ein DIV Element in ein anderes verschieben. Zum Beispiel möchte ich dies (einschließlich aller Kinder) verschieben:

<div id="source">
...
</div>

das mögen:

<div id="destination">
...
</div>

damit ich das habe:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

Answer #1

Alte Frage ist aber gekommen, weil ich Inhalte von einem Container zu einem anderen einschließlich aller Event-Listener verschieben muss .

jQuery hat keine Möglichkeit, es zu tun, aber die Standard-DOM-Funktion appendChild tut es.

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

Wenn Sie appendChild verwenden, wird die Quelle entfernt und in das Ziel einschließlich der Ereignis-Listener gestellt: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild


Answer #2

Haben Sie schon einmal JavaScript versucht ... destination.appendChild(source); ?

onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>


Answer #3

Ich habe große Speicherlecks und Leistungsunterschiede zwischen insertAfter & after oder insertBefore & bey bemerkt. Wenn Sie Tonnen von DOM-Elementen haben oder innerhalb eines MouseMove-Ereignisses after () oder before () verwenden müssen, wird der Browserspeicher wahrscheinlich erhöht und Die nächsten Operationen werden sehr langsam ausgeführt. Die Lösung, die ich gerade erlebt habe, besteht darin, inserBefore stattdessen vor () und insertAfter statt nachher () zu verwenden.


Answer #4

Sie können auch versuchen:

$("#destination").html($("#source"))

Aber das überschreibt alles was du in #destination .


Answer #5

Sie können verwenden:

Nachher einfügen,

jQuery("#source").insertAfter("#destination");

In ein anderes Element einfügen

jQuery("#source").appendTo("#destination");

Answer #6

Vielleicht möchten Sie die Funktion appendTo verwenden (die zum Ende des Elements hinzufügt):

$("#source").appendTo("#destination");

Alternativ können Sie die prependTo Funktion verwenden (die zum Anfang des Elements prependTo ):

$("#source").prependTo("#destination");

Beispiel:

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});
#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>


Answer #7

Wenn Sie eine schnelle Demo und weitere Details zum Verschieben von Elementen wünschen, versuchen Sie diesen Link:

http://html-tuts.com/move-div-in-another-div-with-jquery

Hier ist ein kurzes Beispiel:

So verschieben Sie OBEN ein Element:

$('.whatToMove').insertBefore('.whereToMove');

So verschieben Sie sich NACH einem Element:

$('.whatToMove').insertAfter('.whereToMove');

Um sich innerhalb eines Elements zu bewegen, ÜBERNEHMEN Sie alle Elemente in diesem Container:

$('.whatToMove').prependTo('.whereToMove');

Um innerhalb eines Elements nach allen Elementen in diesem Container zu verschieben:

$('.whatToMove').appendTo('.whereToMove');

Answer #8

Wenn das div in das Sie Ihr Element div möchten, Inhalt enthält und das Element nach dem Hauptinhalt angezeigt werden soll:

  $("#destination").append($("#source"));

Wenn das div in das Sie Ihr Element div möchten, Inhalt enthält und Sie das Element vor dem Hauptinhalt anzeigen möchten:

$("#destination").prepend($("#source"));

Wenn das div in das Sie Ihr Element div möchten, leer ist oder Sie es vollständig ersetzen möchten:

$("#element").html('<div id="source">...</div>');

Wenn Sie ein Element vor einem der oben genannten Elemente duplizieren möchten:

$("#destination").append($("#source").clone());
// etc.




html