javascript - teclado - ¿Cómo mover un elemento a otro elemento?
mover un div con el mouse javascript (13)
¿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);
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>
Acabo de utilizar
$(''#source'').prependTo(''#destination'');
Que agarré de elated.com/articles/jquery-removing-replacing-moving-elements .
Alguna vez probé JavaScript plano ... 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>
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>
La pregunta anterior pero llegó aquí porque necesito mover el contenido de un contenedor a otro, incluyendo a todos los oyentes del evento .
jQuery no tiene una forma de hacerlo pero la función estándar de DOM appendChild la tiene.
//assuming only one .source and one .target
$(''.source'').on(''click'',function(){console.log(''I am clicked'');});
$(''.target'')[0].appendChild($(''.source'')[0]);
El uso de appendChild elimina el .source y lo coloca en el destino, incluidos sus escuchas de eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
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>
Puedes usar:
Para insertar despues
jQuery("#source").insertAfter("#destination");
Para insertar dentro de otro elemento,
jQuery("#source").appendTo("#destination");
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.
También puedes probar:
$("#destination").html($("#source"))
Pero esto sobrescribirá completamente todo lo que tengas en #destination .
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.