• 售前

  • 售后

热门帖子
入门百科

js实现表格拖动选项

[复制链接]
Sstz0719 显示全部楼层 发表于 2021-10-26 12:55:58 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了js实现表格拖动选项的具体代码,供大家参考,具体内容如下
标题要求如下图所示,具体思绪:拖动改变选择项,用的的变乱是js的拖动相干变乱。

代码:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         ul,li{
  15.             list-style: none;
  16.             cursor: pointer;
  17.         }
  18.         .specWrap{
  19.             width: 800px;
  20.             margin: 0 auto;
  21.             user-select: none;
  22.         }
  23.         .specification{
  24.             border: 1px solid #ccc;
  25.             width: 100%;
  26.             position: relative;
  27.         }
  28.         .sp-top{
  29.             height: 60px;
  30.             line-height: 60px;
  31.             text-align: center;
  32.             box-sizing: border-box;
  33.         }
  34.         .sp-top ul{
  35.             overflow: hidden;
  36.         }
  37.         .sp-top ul li{
  38.             width: 33%;
  39.             float: left
  40.         }
  41.         .sp-top ul li:nth-of-type(2){
  42.             border-left: 1px solid #ccc;
  43.             border-right: 1px solid #ccc;
  44.         }
  45.         .sp-cen{
  46.             text-align: left;
  47.             box-sizing: border-box;
  48.             border-bottom: 1px solid #ccc;
  49.             border-top: 1px solid #ccc;
  50.             text-indent: 20px;
  51.             overflow: hidden;
  52.         }
  53.         .screen{
  54.             width: 33%;
  55.             float: left;
  56.         }
  57.         .screen:nth-of-type(2){
  58.             border-left: 1px solid #ccc;
  59.             border-right: 1px solid #ccc;
  60.         }
  61.         .sp-btm{
  62.             text-align: left;
  63.             box-sizing: border-box;
  64.             text-indent: 20px;
  65.             overflow: hidden;
  66.         }
  67.         .resolution{
  68.             width: 33%;
  69.             float: left;
  70.         }
  71.         .resolution:nth-of-type(2){
  72.             border-left: 1px solid #ccc;
  73.             border-right: 1px solid #ccc;
  74.         }
  75.         .btn{
  76.             float: right;
  77.             width: 60px;
  78.             margin: 20px 0;
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83. <div class="specWrap">
  84.     <div class="specification">
  85.         <div class="sp-top">
  86.             <ul>
  87.                 <li>SPECIFICATIONS功能</li>
  88.                 <li>LEVELS规格</li>
  89.                 <li>SELECTED选择</li>
  90.             </ul>
  91.         </div>
  92.         <div class="sp-cen">
  93.             <div class="screen">
  94.                 <p>Screen size屏幕大小</p>
  95.             </div>
  96.             <div class="screen">
  97.                 <ul class="size">
  98.                     <li>4</li>
  99.                     <li>4.5</li>
  100.                     <li>5</li>
  101.                     <li>5.5</li>
  102.                     <li>6</li>
  103.                     <li>6.5</li>
  104.                 </ul>
  105.             </div>
  106.             <div class="screen sc"></div>
  107.         </div>
  108.         <div class="sp-btm">
  109.             <div class="resolution">
  110.                 <p>Screen resolution屏幕分辨率</p>
  111.             </div>
  112.             <div class="resolution">
  113.                 <ul class="resolu">
  114.                     <li>High definition (720p)</li>
  115.                     <li>Full HD (1080p)</li>
  116.                     <li>Quad HD (2K) 四倍高清(2K)</li>
  117.                     <li>Ultra HD (4K) 超高清(4K)</li>
  118.                 </ul>
  119.             </div>
  120.             <div class="resolution re"></div>
  121.         </div>
  122.     </div>
  123.     <div>
  124.         <button class="btn">提交</button>
  125.     </div>
  126. </div>
  127. </body>
  128. <script>
  129.     var size=document.getElementsByClassName('size')[0].children;  //size列表
  130.     var resolu=document.getElementsByClassName('resolu')[0].children; //分辨率列表
  131.     var specWrap=document.getElementsByClassName('specWrap')[0];
  132.     for(let i=0;i<size.length;i++){  //size选择
  133.         size[i].function (e) {  //按下事件
  134.             for(var i=0;i<size.length;i++){
  135.                 size[i].style.position='';
  136.                 size[i].style.background='';
  137.             }
  138.             var e=e||event;
  139.             var lf=e.offsetX;
  140.             var tp=e.offsetY;
  141.             var current=this;
  142.             current.style.position='absolute';
  143.             document.function(e){  //移动事件
  144.                 var e=e||event;
  145.                 var x=e.clientX-specWrap.offsetLeft-lf;
  146.                 var y=e.clientY-specWrap.offsetTop-tp;
  147.                 current.style.left=x+'px';
  148.                 current.style.top=y+'px';
  149.             }
  150.             document.function(){  //鼠标释放事件
  151.                 document.null;
  152.                 document.getElementsByClassName('sc')[0].innerHTML=current.innerHTML;
  153.                 current.style.position='';
  154.             }
  155.         }
  156.     }
  157.     for(let i=0;i<resolu.length;i++){  //resolution选择,可以进行代码封装,在这我就不封装了
  158.         resolu[i].function (e) {
  159.             for(var i=0;i<resolu.length;i++){
  160.                 resolu[i].style.position='';
  161.                 resolu[i].style.background='';
  162.             }
  163.             var e=e||event;
  164.             var lf=e.offsetX;
  165.             var tp=e.offsetY;
  166.             var current=this;
  167.             current.style.position='absolute';
  168.             current.style.zIndex=6;
  169.             document.function(e){
  170.                 var e=e||event;
  171.                 var x=e.clientX-specWrap.offsetLeft-lf;
  172.                 var y=e.clientY-specWrap.offsetTop-tp;
  173.                 current.style.left=x+'px';
  174.                 current.style.top=y+'px';
  175.             }
  176.             document.function(){
  177.                 document.null;
  178.                 document.getElementsByClassName('re')[0].innerHTML=current.innerHTML;
  179.                 current.style.position='';
  180.             }
  181.         }
  182.     }
  183. </script>
  184. </html>
复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作