返回顶部
首页 > 资讯 > 精选 >js实现表格拖动选项的方法
  • 678
分享到

js实现表格拖动选项的方法

2023-06-14 13:06:54 678人浏览 薄情痞子
摘要

小编给大家分享一下js实现表格拖动选项的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下题目要求如下图所示,具体思路:拖动改变选择项,用的的事件是j

小编给大家分享一下js实现表格拖动选项的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

具体内容如下

题目要求如下图所示,具体思路:拖动改变选择项,用的的事件是js的拖动相关事件。

js实现表格拖动选项的方法

代码:

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-Scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta Http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        ul,li{            list-style: none;            cursor: pointer;        }        .specWrap{            width: 800px;            margin: 0 auto;            user-select: none;        }        .specification{            border: 1px solid #ccc;            width: 100%;            position: relative;        }        .sp-top{            height: 60px;            line-height: 60px;            text-align: center;            box-sizing: border-box;        }        .sp-top ul{            overflow: hidden;        }        .sp-top ul li{            width: 33%;            float: left        }        .sp-top ul li:nth-of-type(2){            border-left: 1px solid #ccc;            border-right: 1px solid #ccc;        }        .sp-cen{            text-align: left;            box-sizing: border-box;            border-bottom: 1px solid #ccc;            border-top: 1px solid #ccc;            text-indent: 20px;            overflow: hidden;        }        .screen{            width: 33%;            float: left;        }        .screen:nth-of-type(2){            border-left: 1px solid #ccc;            border-right: 1px solid #ccc;        }        .sp-btm{            text-align: left;            box-sizing: border-box;            text-indent: 20px;            overflow: hidden;        }        .resolution{            width: 33%;            float: left;        }        .resolution:nth-of-type(2){            border-left: 1px solid #ccc;            border-right: 1px solid #ccc;        }        .btn{            float: right;            width: 60px;            margin: 20px 0;        }    </style></head><body><div class="specWrap">    <div class="specification">        <div class="sp-top">            <ul>                <li>SPECIFICATIONS功能</li>                <li>LEVELS规格</li>                <li>SELECTED选择</li>            </ul>        </div>        <div class="sp-cen">            <div class="screen">                <p>Screen size屏幕大小</p>            </div>            <div class="screen">                <ul class="size">                    <li>4</li>                    <li>4.5</li>                    <li>5</li>                    <li>5.5</li>                    <li>6</li>                    <li>6.5</li>                </ul>            </div>            <div class="screen sc"></div>        </div>        <div class="sp-btm">            <div class="resolution">                <p>Screen resolution屏幕分辨率</p>            </div>            <div class="resolution">                <ul class="resolu">                    <li>High definition (720p)</li>                    <li>Full HD (1080p)</li>                    <li>Quad HD (2K) 四倍高清(2K)</li>                    <li>Ultra HD (4K) 超高清(4K)</li>                </ul>            </div>            <div class="resolution re"></div>        </div>    </div>    <div>        <button class="btn">提交</button>    </div></div></body><script>    var size=document.getElementsByClassName('size')[0].children;  //size列表    var resolu=document.getElementsByClassName('resolu')[0].children; //分辨率列表    var specWrap=document.getElementsByClassName('specWrap')[0];    for(let i=0;i<size.length;i++){  //size选择        size[i].function (e) {  //按下事件            for(var i=0;i<size.length;i++){                size[i].style.position='';                size[i].style.background='';            }            var e=e||event;            var lf=e.offsetX;            var tp=e.offsetY;            var current=this;            current.style.position='absolute';            document.function(e){  //移动事件                var e=e||event;                var x=e.clientX-specWrap.offsetLeft-lf;                var y=e.clientY-specWrap.offsetTop-tp;                current.style.left=x+'px';                current.style.top=y+'px';            }            document.function(){  //鼠标释放事件                document.null;                document.getElementsByClassName('sc')[0].innerHTML=current.innerHTML;                current.style.position='';            }        }    }    for(let i=0;i<resolu.length;i++){  //resolution选择,可以进行代码封装,在这我就不封装了        resolu[i].function (e) {            for(var i=0;i<resolu.length;i++){                resolu[i].style.position='';                resolu[i].style.background='';            }            var e=e||event;            var lf=e.offsetX;            var tp=e.offsetY;            var current=this;            current.style.position='absolute';            current.style.zIndex=6;            document.function(e){                var e=e||event;                var x=e.clientX-specWrap.offsetLeft-lf;                var y=e.clientY-specWrap.offsetTop-tp;                current.style.left=x+'px';                current.style.top=y+'px';            }            document.function(){                document.null;                document.getElementsByClassName('re')[0].innerHTML=current.innerHTML;                current.style.position='';            }        }    }</script></html>

以上是“js实现表格拖动选项的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: js实现表格拖动选项的方法

本文链接: https://lsjlt.com/news/271352.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • js实现表格拖动选项的方法
    小编给大家分享一下js实现表格拖动选项的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下题目要求如下图所示,具体思路:拖动改变选择项,用的的事件是j...
    99+
    2023-06-14
  • js实现表格拖动选项
    本文实例为大家分享了js实现表格拖动选项的具体代码,供大家参考,具体内容如下 题目要求如下图所示,具体思路:拖动改变选择项,用的的事件是js的拖动相关事件。 代码: <!...
    99+
    2024-04-02
  • js拖拉表格实现内容计算
    本文实例为大家分享了js拖拉表格实现内容计算的具体代码,供大家参考,具体内容如下 前言 制作网页版Excel H5新增功能:可拖拉-draggable, ...
    99+
    2024-04-02
  • js实现动态选项卡的方法有哪些
    这篇“js实现动态选项卡的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js实现...
    99+
    2024-04-02
  • jquery实现表格行拖动排序
    本文实例为大家分享了jquery实现表格行拖动排序的具体代码,供大家参考,具体内容如下 引入JS <script src="jquery.min.js"></scr...
    99+
    2024-04-02
  • JS如何拖动选择table里的单元格
    这篇文章主要为大家展示了“JS如何拖动选择table里的单元格”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何拖动选择table里的单元格”这篇文章吧。具...
    99+
    2024-04-02
  • drupal创建拖动排序表格的方法
    Drupal中,有许多用户界面采用了拖动排序的功能。在排序的界面上,拖动排序是一种比较友好的形式。下面是一个例子。 1. 在hook_menu里定义一个menu复制代码代码如下://栏目下,节点排序界面,可以拖动行来排序...
    99+
    2022-06-12
    drupal 创建 拖动 排序 表格 方法
  • jquery如何实现表格行拖动排序
    这篇文章主要介绍了jquery如何实现表格行拖动排序,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下引入JS<script src="jq...
    99+
    2023-06-29
  • Dreamweaver中怎么实现可拖动表格效果
    Dreamweaver中怎么实现可拖动表格效果,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。  1.在文档中插入一个表格。插入一个表格  2.选中表格,在属性面...
    99+
    2023-06-08
  • js实现移动端简易滑动表格
    本文实例为大家分享了js实现移动端简易滑动表格的具体代码,供大家参考,具体内容如下 上js文件代码 <template>   <view>     <s...
    99+
    2024-04-02
  • jQuery实现表格的数据拖拽
    jQuery实现将一个ant-table的数据拖拽复制到另一个ant-table,供大家参考,具体内容如下 需求 1、ant-design-vue2、将一个嵌套在drawer中的ta...
    99+
    2024-04-02
  • JavaScript实现动态表格的方法详解
    目录JavaScript实现动态表格基本效果如下代码如下:第一种方式(较简单,建议使用)方式二改进版代码如下:总结JavaScript实现动态表格 (改建版,代码见最下面) 基本效...
    99+
    2024-04-02
  • js如何实现自动轮换选项卡
    这篇文章给大家分享的是有关js如何实现自动轮换选项卡的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果图:代码:<html> <head> <met...
    99+
    2024-04-02
  • antdesign中实现table的表格行的拖拽
    前言:  首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路,   然后就打开官网的文档进行观看。一开始准备写 打开官网的一个文档是4...
    99+
    2024-04-02
  • js如何实现移动端简易滑动表格
    这篇文章主要介绍“js如何实现移动端简易滑动表格”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“js如何实现移动端简易滑动表格”文章能帮助大家解决问题。上js文件代码<template>&...
    99+
    2023-06-29
  • JS实现简单可拖动的模态框
    本文实例为大家分享了JS实现简单可拖动的模态框的具体代码,供大家参考,具体内容如下 这篇博文有 简单实现 和 带样式且稍微复杂一点 的两个版本 简单版本 效果图: 实现思路: 给可...
    99+
    2024-04-02
  • react 实现表格列表拖拽排序的示例
    目录问题描述思路解析1. react-sortable-hoc2. array-move问题描述 在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序。 效果图如下所示:...
    99+
    2023-02-01
    react 表格列表拖拽排序 react 拖拽排序
  • element表格行列拖拽的实现示例
    element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现,先来看一下动态图,效果是不是你们想要的。 首先需要安装Sortable.js ...
    99+
    2024-04-02
  • jQuery如何实现表格的数据拖拽
    这篇文章给大家分享的是有关jQuery如何实现表格的数据拖拽的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下需求ant-design-vue2、将一个嵌套在drawer中的table数据拖拽复制到dra...
    99+
    2023-06-29
  • 怎么用js组件实现可拖动的div
    这篇“怎么用js组件实现可拖动的div”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作