简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JS做出左右列表平移功能

php中世界最好的语言
풀어 주다： 2018-06-13 09:58:40
원래의
1539명이 탐색했습니다.

这次给大家带来JS做出左右列表平移功能，JS做出左右列表平移功能的注意事项有哪些，下面就是实战案例，一起来看一下。

实现功能：

1.左边的下拉框内容添加到右边的下拉框，支持多选移动，且同时将右边的下拉框对象移除；

2.支持列表中项目上下位置的移动；

3.效果图如下：

Html代码

 
 
选择下拉菜单 
 
 

 
 

选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。
 

 
 
 
 
 
 
 
 

 
 
 

 

 
 
 
 
 
 

 
 

 
值： 

 
 
 
로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue2实现购物车地址选配

Angular服务端渲染方法总结

위 내용은 JS做出左右列表平移功能의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
js左边列表移到右边
원천：php.cn
이전 기사：使用el表达式非空判断 다음 기사：用JQuery如何实现表单验证，具体应该怎么做？
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
React - Handsontable数据网格：移动列并更新状态 我正在使用React的库，我有一个标题的列表（数组），另一边是一个包含表格数据的数组。阅读文档后，我能够启用菜单，其中我添加了“在左侧添加列”和“在右侧添加列”的选项，但这只是在视...
에서 2023-09-15 21:51:29
0
1
307
在 R Shiny 中，如何制作一个复选框表，该表还具有单独行/列的“全选”复选框？ 使用RShiny，我想显示一个表格（例如通过“DT”包），其中每个单元格包含一个复选框。在每行和列标题旁边，我想显示一个“全选”/“主复选框”，选择该复选框后，将选择相应行或列中的...
에서 2023-09-08 15:24:52
0
1
217
如何在HTML表格中实现图像右对齐 我已经制作了一个Django网站，想要显示我的结果，就像在顶部有一个小表单。在左边有一个表格，我想在右边的表格中添加两个图片和另一列。我已经设计了一个图来更好地解释-在此输入图像描...
에서 2023-09-02 09:04:11
0
1
231
对齐有序列表数字到右边的技巧 考虑下面的代码：在输出中，列表项确实在右边，但是数字不在右边的位置。如何将数字也对齐到右边的位置？ol{width:15vw;}<olstyle="text-ali...
에서 2023-08-31 12:03:12
0
1
356
JS效果没有 JS和CSS文件已经被正确引用上了，但是点侧边栏的问题列表等选项时，右边没有显示相应的标签页。就是点了侧边栏选项没反应。
에서 2019-06-22 14:59:15
0
2
1003
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！