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

Example code of Vue3 encapsulated magnifying glass component

Table of contents Component Infrastructure Purpos...

How to call the interrupted system in Linux

Preface Slow system calls refer to system calls t...

js tag syntax usage details

Table of contents 1. Introduction to label statem...

How to find and delete duplicate records in MySQL

Hello everyone, I am Tony, a teacher who only tal...

React Native startup process detailed analysis

Introduction: This article takes the sample proje...

JS+Canvas draws a lucky draw wheel

This article shares the specific code of JS+Canva...

Analysis on the problem of data loss caused by forced refresh of vuex

vuex-persistedstate Core principle: store all vue...

Implementation of React star rating component

The requirement is to pass in the rating data for...

How to use Typescript to encapsulate local storage

Table of contents Preface Local storage usage sce...

Case analysis of several MySQL update operations

Table of contents Case Study Update account balan...

How to load Flash in HTML (2 implementation methods)

First method : CSS code: Copy code The code is as ...

A brief discussion on two methods to solve space-evenly compatibility issues

Since its launch in 2009, flex has been supported...

How to implement HTML Table blank cell completion

When I first taught myself web development, there...

Design Theory: A Method to Understand People's Hearts

<br />Once, Foyin and Mr. Dongpo were chatti...

Vue implements a simple magnifying glass effect

This article example shares the specific code of ...