teclado - mover una imagen javascript




¿Cómo mover un elemento a otro elemento? (9)

¿Qué pasa con una solución de JavaScript ?

Declara un fragmento:

var fragment = document.createDocumentFragment();

Agregue el elemento deseado al fragmento:

fragment.appendChild(document.getElementById('source'));

Adjuntar fragmento al elemento deseado:

document.getElementById('destination').appendChild(fragment);

Echale un vistazo.

Me gustaría mover un elemento DIV dentro de otro. Por ejemplo, quiero mover esto (incluyendo a todos los niños):

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

dentro de esto:

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

para que tenga esto:

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


En aras de la integridad, hay otro enfoque wrap() o wrapAll() mencionado en este artículo . Por lo tanto, la pregunta del OP podría resolverse con esto (es decir, suponiendo que <div id="destination" /> todavía no existe, el siguiente enfoque creará una envoltura de este tipo desde el principio: el OP no estaba claro si la envoltura ya existe o no):

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

Suena prometedor. Sin embargo, cuando intentaba hacer $("[id^=row]").wrapAll("<fieldset></fieldset>") en varias estructuras anidadas como esta:

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

Envuelve correctamente esos <div>...</div> y <input>...</input> PERO ALGO SALE DE LA <label>...</label> . Así que terminé usando el $("row1").append("#a_predefined_fieldset") explícito $("row1").append("#a_predefined_fieldset") lugar. Entonces, YMMV.


Es posible que desee utilizar la función appendTo (que se agrega al final del elemento):

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

Alternativamente, puede usar la función prependTo (que se agrega al principio del elemento):

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

Ejemplo:

$("#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>


Noté una gran pérdida de memoria y una gran diferencia de rendimiento entre Insertar después y después o insertar Antes y antes ... Si tiene toneladas de elementos DOM, o necesita usar después () o antes () dentro de un evento MouseMove, la memoria del navegador probablemente aumentará y Las próximas operaciones serán muy lentas. La solución que acabo de experimentar es usar inserBefore antes de () e insertAfter en lugar de después ().


Puedes usar el siguiente código para mover la fuente al destino

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

intenta trabajar codepen

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}
#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>


Si desea una demostración rápida y más detalles sobre cómo mover elementos, pruebe este enlace:

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

Aquí hay un breve ejemplo:

Para mover ARRIBA un elemento:

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

Para mover DESPUÉS de un elemento:

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

Para moverse dentro de un elemento, ARRIBA TODOS los elementos dentro de ese contenedor:

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

Para moverse dentro de un elemento, DESPUÉS DE TODOS los elementos dentro de ese contenedor:

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

Si el div donde quieres poner tu elemento tiene contenido dentro, y quieres que el elemento se muestre después del contenido principal:

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

Si el div donde quieres poner tu elemento tiene contenido dentro, y quieres mostrar el elemento antes del contenido principal:

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

Si el div en el que desea colocar su elemento está vacío, o si desea reemplazarlo por completo:

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

Si desea duplicar un elemento antes de cualquiera de los anteriores:

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

mi solución:

MOVIMIENTO:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

DUPDO:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

Tenga en cuenta el uso de .detach (). Al copiar, tenga cuidado de no duplicar las ID.





html