NiceSnippets.com
How to move one list data to another list using jQuery in bootstrap 4 ?
In this demo we give you source code of how to sort two list. here you can see two list of data you can select data from one list and move selected data to another list esaily. ih this demo we use parts-selector.js jquery for moving selected data. you can use this demo for sorting two list. this is work like sorting jquery.
We allows to free snippets of sorting two list using jquery demo , you can download full code of Dual Multi Select Plugin jQuery Parts Selector layout. Here in this post i will give you example of how to you can move Available items to Chosen items list snippet and you will get simple code of html, css and jquery. In bootstrap 4 with sorting two list snippet i give you three tab with html, css and js, you can easily get code of bootstrap sortable list layout.
you can download "parts-selector.js" from : https://github.com/smth/parts-selector/blob/master/parts-selector.js
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="parts-selector.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://github.com/smth/parts-selector/blob/master/parts-selector.js"></script>
</head>
<body class="bg-danger">
<div class="container">
<div class="row">
<div class="offset-lg-3 col-lg-6 col-sm-12 col-12 main-section">
<div class="parts-selector" id="parts-selector-1">
<div class="parts list">
<h3 class="list-heading">Available items</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="controls">
<a class="moveto selected"><span class="icon"></span><span class="text">Add</span></a>
<a class="moveto parts"><span class="icon"></span><span class="text">Remove</span></a>
</div>
<div class="selected list">
<h3 class="list-heading">Chosen items</h3>
<ul>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$( "#parts-selector-1" ).partsSelector();
});
</script>
</body>
</html>
.parts-selector {
margin-top: 32px;
margin-bottom: 32px; }
@media screen and (min-width: 768px) {
.parts-selector {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; } }
.parts-selector .list {
border: solid 1px #333;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: #fff;
border-radius: 3px;
-ms-flex-preferred-size: 0;
flex-basis: 0;
min-height: 2em; }
@media screen and (min-width: 768px) {
.parts-selector .list {
max-height: 90vh;
overflow: auto; } }
.parts-selector .list .list-heading {
font-size: 1em;
margin: 0;
padding: 8px 16px;
border-bottom: solid 2px rgba(223, 223, 223, 0.5);
color: #FFF;
background-color: #333;
}
.parts-selector .list ul {
padding: 0;
margin: 0; }
.parts-selector .list .message,
.parts-selector .list .alert {
display: block;
font-size: 0.8em;
padding: 4px 16px; }
.parts-selector .list .alert.info {
background-color: #2196f3;
color: #fff; }
.parts-selector .list .alert.error {
background-color: #2196f3;
color: #fff; }
.parts-selector .list li {
display: block;
border-bottom: solid 1px rgba(223, 223, 223, 0.5);
padding: 8px 16px;
position: relative;
color: rgba(0, 0, 0, 0.7); }
.parts-selector .list li.selected a, .parts-selector .list li.just.moved a {
color: inherit;
text-decoration: underline; }
.parts-selector .list li.selected {
background-color: #ffe990;
color: #000; }
.parts-selector .list li.selected .item-button .icon:before, .parts-selector .list li.selected .item-button .icon:after, .parts-selector .list li.selected .item-button:hover .icon:before, .parts-selector .list li.selected .item-button:hover .icon:after {
background-color: #fff; }
.parts-selector .list li.moved {
-webkit-transition: all .75s;
transition: all .75s; }
.parts-selector .list li.moved .message {
background-color: #2196f3;
color: #fff;
margin-left: -16px;
margin-right: -16px;
position: relative;
bottom: -8px; }
.parts-selector .list li.moved.just {
background-color: rgba(33, 150, 243, 0.1); }
.parts-selector .list li.moved.just .item-button .icon {
background-color: rgba(255, 255, 255, 0.9); }
.parts-selector .list li .item-button {
display: block; }
.parts-selector .list li .item-button .icon {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
right: 8px;
margin-top: -10px;
border-radius: 50%; }
.parts-selector .list li .item-button .icon:before, .parts-selector .list li .item-button .icon:after {
content: '';
display: block;
position: absolute;
width: 11px;
height: 3px;
background-color: #dfdfdf;
top: 9px;
left: 5px; }
.parts-selector .list li .item-button .icon:after {
width: 3px;
height: 11px;
top: 5px;
left: 9px; }
.parts-selector .list li .item-button .text {
display: block;
width: 0;
height: 0;
overflow: hidden; }
.parts-selector .list li .item-button.remove .icon:after {
display: none; }
.parts-selector .list li .item-button:hover .icon:before,
.parts-selector .list li .item-button:hover .icon:after {
background-color: #2196f3; }
.parts-selector .controls {
text-align: center; }
@media screen and (min-width: 768px) {
.parts-selector .controls {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-item-align: center;
align-self: center; } }
.parts-selector .controls .moveto {
margin: 4px 16px;
text-decoration: none;
position: relative;
display: inline-block; }
.parts-selector .controls .moveto .icon {
display: block;
position: relative;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center; }
.parts-selector .controls .moveto .icon:before, .parts-selector .controls .moveto .icon:after {
content: '';
height: 1em;
width: 0.2em;
background-color: #dfdfdf;
position: absolute;
top: 50%;
margin-top: -0.5em;
-webkit-transition: background-color .7s;
transition: background-color .7s; }
.parts-selector .controls .moveto .icon:before {
left: 0.6em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.parts-selector .controls .moveto .icon:after {
right: 0.6em;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.parts-selector .controls .moveto.selected .icon:before {
left: 0.6em;
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
.parts-selector .controls .moveto.selected .icon:after {
right: 0.6em;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg); }
@media screen and (min-width: 768px) {
.parts-selector .controls .moveto {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); } }
.parts-selector .controls .moveto .text {
display: block;
width: 0;
height: 0;
overflow: hidden; }
.parts-selector.parts-selected .controls .moveto.selected {
cursor: pointer; }
.parts-selector.parts-selected .controls .moveto.selected .icon:before,
.parts-selector.parts-selected .controls .moveto.selected .icon:after {
background-color: #333; }
.parts-selector.selected-selected .controls .moveto.parts {
cursor: pointer; }
.parts-selector.selected-selected .controls .moveto.parts .icon:before,
.parts-selector.selected-selected .controls .moveto.parts .icon:after {
background-color: #333; }
.parts,.selected{
border:1px solid #FFF;
}
.parts-selector .controls .moveto .icon::before, .parts-selector .controls .moveto .icon::after{
background-color: #fff;
}
