How to Move one DIV element inside another using jQuery,
How to move an element into another element,
Moving the content of a DIV to another DIV with jQuery,
jQuery Move div into another div,
Moving a div from inside one div to another div using jquery,
Move an element into another element in jQuery,
Move Div in Another Div with jQuery
First of all, you will write the code below given below.
<!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"> <title>How to Move one DIV element inside another using jQuery</title> </head> <body> <div id="nonSelected"> <!--Declaring BUTTON TAGS --> <button id="btnDefault" onclick="allmoveButton(this)" type="button">First</button> <button id="btnPrimary" onclick="allmoveButton(this)" type="button" >Second</button> <button id="btnDanger" onclick="allmoveButton(this)" type="button">Third</button> </div> <div id="selected"> </div> </body> </html>
Then you add the given js code as well.
<script>
function allmoveButton(elem){
if( $(elem).parent().attr("id") == "nonSelected" ){
$(elem).detach().appendTo('#selected');
}
else{
$(elem).detach().appendTo('#nonSelected');
}
}
</script>
Then after that you will write this code of css in the same file. Then you can later manage your css file accordingly when your code is tested.
<style>
#nonSelected{
position: absolute;
top: 10px;
left: 10px;
width: 180px;
height: 180px;
background-color: #884333;
border-width: 1px;
border-style: dotted;
border-color: black;
padding: 10px;
}
#selected{
position: absolute;
top: 10px;
left: 200px;
width: 180px;
height: 180px;
background-color: #498933;
border-width: 1px;
border-style: dotted;
border-color: black;
padding: 10px;
}
</style>
If you want, you can also merge this entire code by typing it into an identical file as you can see below
how-to-move-one-div-element-inside-another-using-jquery.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">
<title>How to Move one DIV element inside another using jQuery</title>
</head>
<body>
<div id="nonSelected">
<!--Declaring BUTTON TAGS -->
<button id="btnDefault" onclick="allmoveButton(this)" type="button">First</button>
<button id="btnPrimary" onclick="allmoveButton(this)" type="button" >Second</button>
<button id="btnDanger" onclick="allmoveButton(this)" type="button">Third</button>
</div>
<div id="selected">
</div>
</body>
</html>
<script>
function allmoveButton(elem){
if( $(elem).parent().attr("id") == "nonSelected" ){
$(elem).detach().appendTo('#selected');
}
else{
$(elem).detach().appendTo('#nonSelected');
}
}
</script>
<style>
#nonSelected{
position: absolute;
top: 10px;
left: 10px;
width: 180px;
height: 180px;
background-color: #884333;
border-width: 1px;
border-style: dotted;
border-color: black;
padding: 10px;
}
#selected{
position: absolute;
top: 10px;
left: 200px;
width: 180px;
height: 180px;
background-color: #498933;
border-width: 1px;
border-style: dotted;
border-color: black;
padding: 10px;
}
</style>