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

Solution to Linux not supporting all commands

What should I do if Linux does not support all co...

Details of function nesting and closures in js

Table of contents 1. Scope 2. Function return val...

Analysis of the principle of Rabbitmq heartbea heartbeat detection mechanism

Preface When using RabbitMQ, if there is no traff...

Detailed explanation of persistent storage of redis under docker

In this chapter, we will start to operate redis i...

Introduction to new features of MySQL 8.0.11

MySQL 8.0 for Windows v8.0.11 official free versi...

Useful codes for web page creation

<br />How can I remove the scroll bar on the...

How to embed flash video format (flv, swf) files in html files

Flash file formats: .FLV and .SWF There are two ex...

How to transfer files between Windows and Linux

File transfer between Windows and Linux (1) Use W...

Detailed explanation of the basic knowledge of front-end componentization

Table of contents Basic concepts of components Th...

Steps to create a CentOS container through Docker

Table of contents Preface Create a bridge network...

Database SQL statement optimization

Why optimize: With the launch of the actual proje...

12 Laws of Web Design for Clean Code [Graphic]

Beautiful code is the foundation of a beautiful we...

The meaning of the 5 types of spaces in HTML

HTML provides five space entities with different ...

Detailed explanation of the use of the <meta> tag in HTML

In the web pages we make, if we want more people ...