Implementation example of JS native double-column shuttle selection box

Implementation example of JS native double-column shuttle selection box

When to use

Move elements between the two columns in an intuitive way to complete the selection behavior.

After selecting one or more options, click the corresponding arrow key to move the selected options to another column. The left column is source and the right column is target . The design of the API also reflects these two concepts.

Without further ado, let’s get to the code.

Structural branches

image-20211026181412467

Code

dataSelection.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Double column shuttle selection box</title>
    <link rel="stylesheet" href="css/dS.css" rel="external nofollow" >
    <script src="js/jquery.min.js"></script>
    <style>
        body {
            /*background:#000c3b;*/
        }
    </style>
</head>
<body>
	<div style="margin:40px;">
	<ul id="shuttle_box">
		<li class="shuttle_box_li shuttle_box_near">
			<ul id="shuttle_box_left">
				<li class="outside">Li Bai&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">Su Shi&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">Wang Anshi <input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">Li Shangyin <input type="date" class="inside" style="width:150px;"/>
				</li>
			</ul>
		</li>
		<li class="shuttle_box_li" id="shuttle_box_mid">
			<button id="shuttle_box_toRight">>></button>
			<button id="shuttle_box_toLeft"><< </button>
		</li>
		<li class="shuttle_box_li shuttle_box_near">
			<ul id="shuttle_box_right">
				<li>Wang Wei <input type="date" class="inside" style="width:150px;"/>
				</li>
			</ul>
		</li>
	</ul>
	</div>
<script src="js/ds.js"></script>
</body>
</html>

dS.css

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    margin:0; padding:0;
    list-style: none;
}
body{background-color: #e3e3e3;margin: 0px;}
#shuttle_box{width:700px;zoom: 1;margin: 0px auto;}
#shuttle_box:after{
    content: ".";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.shuttle_box_li{height: 540px;float: left;}
.shuttle_box_near{width:300px;background-color:#ffffff;overflow-y: scroll;overflow-x:hidden;border-radius: 10px;border:5px solid #f4f4f4}
.shuttle_box_li_act{color:#ffffff !important;background-color: #009688 !important;border-bottom: 1px solid #ffffff;transition: all .01s;}
.shuttle_box_near::-webkit-scrollbar {/*Overall scrollbar style*/
    width: 6px; /*The height and width correspond to the size of the horizontal and vertical scroll bars respectively*/
    height: 1px;
}
.shuttle_box_near::-webkit-scrollbar-thumb {/*Small square inside the scroll bar*/
    border-radius: 20px;
    background-color: rgba(0,0,0,0.5);
}
.shuttle_box_near::-webkit-scrollbar-track {/*track inside the scroll bar*/
    background-color: rgba(0,0,0,0.2);
    border-radius: 20px;
}
.shuttle_box_near li{
    padding:8px;
    border-bottom: 1px solid #ffffff;
    background-color: #f4f4f4;
    cursor: pointer;
    transition: all .5s;
}
.shuttle_box_li_act:hover{opacity: 0.7;transition: all .01s;}
#shuttle_box_mid{width:80px;text-align: center;}
#shuttle_box_mid button{
    width: 50px;
    height:30px;
    display: block;
    margin:20px auto;
    line-height: 30px;
    color:white;
    cursor: pointer;
    background-color: #009688;
    border-radius: 5px;
    transition: all .5s;
    border:none;
}
#shuttle_box_mid button:hover{opacity: 0.7;transition: all .5s;}
#shuttle_box_toRight{margin-top:225px !important;}

ds.js

$(document).ready(function() {
        //Select the left side of the shuttle box$("#shuttle_box_left").on('click', 'li', function () {
            if ($(this).hasClass('shuttle_box_li_act')) {
                $(this).removeClass('shuttle_box_li_act');
            } else {
                $(this).addClass('shuttle_box_li_act');
            }
        });

        //Click event to select internal event $(".inside").bind('click', function(event1) {
            event1.stopPropagation();
        });

});


//Select the right side of the shuttle box$("#shuttle_box_right").on('click', 'li', function () {
    if ($(this).hasClass('shuttle_box_li_act')) {
        $(this).removeClass('shuttle_box_li_act');
    } else {
        $(this).addClass('shuttle_box_li_act');
    }
});

//Move right$("#shuttle_box_toRight").click(function () {
    if ($("#shuttle_box_left .shuttle_box_li_act").length == 0) return false;

    $("#shuttle_box_left").find('.shuttle_box_li_act').appendTo("#shuttle_box_right");
    $("#shuttle_box_right li").removeClass('shuttle_box_li_act');

});

//Move left$("#shuttle_box_toLeft").click(function () {
    if ($("#shuttle_box_right .shuttle_box_li_act").length == 0) return false;

    $("#shuttle_box_right .shuttle_box_li_act").appendTo("#shuttle_box_left");
    $("#shuttle_box_left li").removeClass('shuttle_box_li_act');
});

Operation Results

insert image description here

This is the end of this article about the implementation example of JS native double-column shuttle selection box. For more relevant JS double-column shuttle selection box content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Summary of common original JS selector usage methods
  • A complete example of a national provincial and municipal secondary linkage drop-down selection menu implemented by js
  • javascript select folder dialog box (web)
  • JS realizes beautiful time selection box effect
  • JS clicks an icon or button to pop up the file selection box implementation code
  • js realizes a three-level linkage selection box code sharing of provinces, cities and districts
  • js to implement select drop-down box selection
  • Select drop-down selection box beautification implementation code (js+css+picture)

<<:  Detailed explanation of common Docker commands

>>:  Analysis of the difference between HTML relative path and absolute path

Recommend

Implementation of CSS Fantastic Border Animation Effect

Today I was browsing the blog site - shoptalkshow...

Detailed explanation of nginx-naxsi whitelist rules

Whitelist rule syntax: BasicRule wl:ID [negative]...

TypeScript generic parameter default types and new strict compilation option

Table of contents Overview Create a type definiti...

Summary of coalesce() usage tips in MySQL

Preface Recently, I accidentally discovered MySQL...

Vue+canvas realizes the effect of refreshing waterfall chart from top to bottom in real time (similar to QT)

Without further ado, here is a demo picture. The ...

Several commonly used methods for centering CSS boxes (summary)

The first one: Using the CSS position property &l...

Vue development tree structure components (component recursion)

This article example shares the specific code of ...

Detailed discussion on the issue of mysqldump data export

1. An error (1064) is reported when using mysqldu...

Examples of using temporary tables in MySQL

I've been a little busy these two days, and t...

The relationship between JS constructor and instantiation and prototype introduction

Table of contents 1. Constructor and instantiatio...

Development details of Vue3 components

Table of contents 1. Introduction 2. Component De...

Example of how nginx implements dynamic and static separation

Table of contents Deploy nginx on server1 Deploy ...

Use CSS's clip-path property to display irregular graphics

clip-path CSS properties use clipping to create t...

3 functions of toString method in js

Table of contents 1. Three functions of toString ...

Native js to realize the upload picture control

This article example shares the specific code of ...