En este artículo, aprenderemos a mover un elemento div HTML dentro de otro usando jQuery.
El elemento HTML div se utiliza para definir una división o una sección en un documento HTML.
Método utilizado:
- parent() : este método se usa para obtener el padre de cada elemento en el conjunto actual de elementos coincidentes, opcionalmente filtrado por un selector.
- detach(): este método se usa para eliminar los elementos seleccionados del árbol DOM, incluido todo el texto y los Nodes secundarios, pero conserva los datos y los eventos.
- attr() : este método se utiliza para establecer o devolver atributos y valores de los elementos seleccionados.
- appendTo(): este método se utiliza para insertar elementos HTML al final de los elementos seleccionados.
Acercarse:
- Cree la página HTML con las diversas divisiones dentro del elemento de división.
- A continuación, cree una función utilizando los métodos anteriores para mover el evento onclick del elemento de división interna.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
body {
text-align: center;
}
#nonSelected {
position: absolute;
top: 150px;
left: 350px;
width: 250px;
height: 280px;
background-color: lightblue;
border-width: 2px;
border-style: dotted;
border-color: black;
padding: 10px;
}
#selected {
position: absolute;
top: 150px;
left: 20px;
width: 250px;
height: 280px;
background-color: lightgreen;
font-style: italic;
border-width: 2px;
border-style: solid;
border-color: black;
padding: 10px;
}
</style>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<b>Make groups of three colors.</b>
<div id="nonSelected">
<div id="div1" onclick="move(this)"
style="background-color: green">
Inner division one
</div>
<div id="div2" onclick="move(this)"
style="background-color: blue">
Inner division two
</div>
<div id="div3" onclick="move(this)"
style="background-color: red">
Inner division three
</div>
<div id="div1" onclick="move(this)"
style="background-color: green">
Inner division one
</div>
<div id="div2" onclick="move(this)"
style="background-color: blue">
Inner division two
</div>
<div id="div3" onclick="move(this)"
style="background-color: red">
Inner division three
</div>
<div id="div1" onclick="move(this)"
style="background-color: green">
Inner division one
</div>
<div id="div2" onclick="move(this)"
style="background-color: blue">
Inner division two
</div>
<div id="div3" onclick="move(this)"
style="background-color: red">
Inner division three
</div>
<div id="div1" onclick="move(this)"
style="background-color: green">
Inner division one
</div>
<div id="div2" onclick="move(this)"
style="background-color: blue">
Inner division two
</div>
<div id="div3" onclick="move(this)"
style="background-color: red">
Inner division three
</div>
<div id="div1" onclick="move(this)"
style="background-color: green">
Inner division one
</div>
<div id="div2" onclick="move(this)"
style="background-color: blue">
Inner division two
</div>
<div id="div3" onclick="move(this)"
style="background-color: red">
Inner division three
</div>
</div>
<div id="selected"></div>
<script>
function move(elem) {
if ($(elem).parent().attr("id") == "nonSelected") {
$(elem).detach().appendTo("#selected");
} else {
$(elem).detach().appendTo("#nonSelected");
}
}
</script>
</body>
</html>
Producción:
un div a otro
Publicación traducida automáticamente
Artículo escrito por vivekpal23123451254 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA