Move Element To Another Position Using jquery: Hi Friends, Today I will tell you about how to move element from one position to another position using jquery. You can change position in li, div, p and in all the tags according to your requirement.
Some of design and development need some position change when you click on an item or element in the particular area.
Today i am using panel and tabs to show, when you click on any list item it change its position from the last list item in the unordered list. I have one more list in which selecting and animating of an element is there.
You can see the live demo of sliding div and download the code from below
For moving and changing the position of an element or item using jquery, you can paste some code in the webpage. These code are
In the html code I take one container and use panel, nav tabs, ul and li to show you tab functionality as well as position change design on click.
<div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-primary"> <div class="panel-heading"> <ul class="nav nav-tabs simple"> <li class="active"><a href="#tab1primary" data-toggle="tab">Primary 1</a></li> <li><a href="#tab2primary" data-toggle="tab">Primary 2</a></li> <li><a href="#tab3primary" data-toggle="tab">Primary 3</a></li> <li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li> <li><a href="#tab5primary" data-toggle="tab">Primary 5</a></li> <li><a href="#tab6primary" data-toggle="tab">Primary 6</a></li> <li><a href="#tab7primary" data-toggle="tab">Primary 7</a></li> <li><a href="#tab8primary" data-toggle="tab">Primary 8</a></li> <li><a href="#tab9primary" data-toggle="tab">Primary 9</a></li> <li><a href="#tab10primary" data-toggle="tab">Primary 10</a></li> <li><a href="#tab11primary" data-toggle="tab">Primary 11</a></li> <li><a href="#tab12primary" data-toggle="tab">Primary 12</a></li> <li><a href="#tab13primary" data-toggle="tab">Primary 13</a></li> <li><a href="#tab14primary" data-toggle="tab">Primary 14</a></li> <li><a href="#tab15primary" data-toggle="tab">Primary 15</a></li> <li><a href="#tab16primary" data-toggle="tab">Primary 16</a></li> <li><a href="#tab17primary" data-toggle="tab">Primary 17</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1primary">Primary 1</div> <div class="tab-pane fade" id="tab2primary">Primary 2</div> <div class="tab-pane fade" id="tab3primary">Primary 3</div> <div class="tab-pane fade" id="tab4primary">Primary 4</div> <div class="tab-pane fade" id="tab5primary">Primary 5</div> <div class="tab-pane fade" id="tab6primary">Primary 6</div> <div class="tab-pane fade" id="tab7primary">Primary 7</div> <div class="tab-pane fade" id="tab8primary">Primary 8</div> <div class="tab-pane fade" id="tab9primary">Primary 9</div> <div class="tab-pane fade" id="tab10primary">Primary 10</div> <div class="tab-pane fade" id="tab11primary">Primary 11</div> <div class="tab-pane fade" id="tab12primary">Primary 12</div> <div class="tab-pane fade" id="tab13primary">Primary 13</div> <div class="tab-pane fade" id="tab14primary">Primary 14</div> <div class="tab-pane fade" id="tab15primary">Primary 15</div> <div class="tab-pane fade" id="tab16primary">Primary 16</div> <div class="tab-pane fade" id="tab17primary">Primary 17</div> </div> </div> </div> </div> </div> </div> |
<div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-primary"> <div class="panel-heading"> <ul class="nav nav-tabs simple"> <li class="active"><a href="#tab1primary" data-toggle="tab">Primary 1</a></li> <li><a href="#tab2primary" data-toggle="tab">Primary 2</a></li> <li><a href="#tab3primary" data-toggle="tab">Primary 3</a></li> <li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li> <li><a href="#tab5primary" data-toggle="tab">Primary 5</a></li> <li><a href="#tab6primary" data-toggle="tab">Primary 6</a></li> <li><a href="#tab7primary" data-toggle="tab">Primary 7</a></li> <li><a href="#tab8primary" data-toggle="tab">Primary 8</a></li> <li><a href="#tab9primary" data-toggle="tab">Primary 9</a></li> <li><a href="#tab10primary" data-toggle="tab">Primary 10</a></li> <li><a href="#tab11primary" data-toggle="tab">Primary 11</a></li> <li><a href="#tab12primary" data-toggle="tab">Primary 12</a></li> <li><a href="#tab13primary" data-toggle="tab">Primary 13</a></li> <li><a href="#tab14primary" data-toggle="tab">Primary 14</a></li> <li><a href="#tab15primary" data-toggle="tab">Primary 15</a></li> <li><a href="#tab16primary" data-toggle="tab">Primary 16</a></li> <li><a href="#tab17primary" data-toggle="tab">Primary 17</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1primary">Primary 1</div> <div class="tab-pane fade" id="tab2primary">Primary 2</div> <div class="tab-pane fade" id="tab3primary">Primary 3</div> <div class="tab-pane fade" id="tab4primary">Primary 4</div> <div class="tab-pane fade" id="tab5primary">Primary 5</div> <div class="tab-pane fade" id="tab6primary">Primary 6</div> <div class="tab-pane fade" id="tab7primary">Primary 7</div> <div class="tab-pane fade" id="tab8primary">Primary 8</div> <div class="tab-pane fade" id="tab9primary">Primary 9</div> <div class="tab-pane fade" id="tab10primary">Primary 10</div> <div class="tab-pane fade" id="tab11primary">Primary 11</div> <div class="tab-pane fade" id="tab12primary">Primary 12</div> <div class="tab-pane fade" id="tab13primary">Primary 13</div> <div class="tab-pane fade" id="tab14primary">Primary 14</div> <div class="tab-pane fade" id="tab15primary">Primary 15</div> <div class="tab-pane fade" id="tab16primary">Primary 16</div> <div class="tab-pane fade" id="tab17primary">Primary 17</div> </div> </div> </div> </div> </div> </div>
It helps to see the design more perfectly in the user eye. It manages design of the panel and list item of tabs.
.panel.with-nav-tabs .panel-heading { padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs { border-bottom: none; } .with-nav-tabs .nav-tabs > li > a { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; background-color: #3071a9; border-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.active > a, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus { color: #428bca; background-color: #fff; border-color: #428bca; border-bottom-color: transparent; } |
.panel.with-nav-tabs .panel-heading { padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs { border-bottom: none; } .with-nav-tabs .nav-tabs > li > a { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; background-color: #3071a9; border-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.active > a, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus { color: #428bca; background-color: #fff; border-color: #428bca; border-bottom-color: transparent; }
I have made two types of jquery code for changinga and moving the element from one place to another on click. As per your requirement you can choose and paste the code of any of them. These are
1) For Simple – Move Element To Another Position Using jquery Without Animation:
<script> $('.simple li').click(function() { var $this = $(this); $this.insertAfter($this.c(':last')); }); </script> |
<script> $('.simple li').click(function() { var $this = $(this); $this.insertAfter($this.c(':last')); }); </script>
2) Animated – Move Element To Another Position Using jquery With Animation
<script> $('.animated li').click(function() { var $this = $(this), callback = function() { $this.insertAfter($this.siblings(':last')); }; $this.fadeOut(500, callback).fadeIn(500); }); </script> |
<script> $('.animated li').click(function() { var $this = $(this), callback = function() { $this.insertAfter($this.siblings(':last')); }; $this.fadeOut(500, callback).fadeIn(500); }); </script>
Important Note:
For any problem you can see the live demo and download the code from below.
Read About Other Interesting Things about jquery below.
I hope you will like Move Element To Another Position Using jquery. If You found it useful please subscribe my blog.
Categories: Website Design
Leave a Reply