拖拽选择表格

最新推荐文章于 2023-05-17 13:58:40 发布
最新推荐文章于 2023-05-17 13:58:40 发布
阅读量78 收藏 1
点赞数 1
分类专栏： 前端 js 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaosi1413/article/details/122624092
版权
前端 同时被 2 个专栏收录
72 篇文章 6 订阅
订阅专栏
js
25 篇文章 0 订阅
订阅专栏

鼠标拖拽选中

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap-grid.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body {
            width: 95%;
            margin: 0 auto;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .top {
            border: 1px solid #E68DB5;
            position: relative;
            padding: 10px;
        }

        .typeList {
            display: flex;
            margin: 10px;
        }

        .typeList>div {
            margin-right: 20px;
            border: 1px solid #ECAAC8;
            border-radius: 100px;
            padding: 5px;
            color: #949494;
            width: 100px;
            text-align: center;
        }

        .label {
            width: 50px;
            position: relative;
            text-align-last: justify;
            padding: 5px;
            margin-right: 20px;

        }

        .label span {
            position: absolute;
            right: 0px;
        }

        .active {
            background-color: #CF2571;
            color: white !important;
        }

        .topBtns {
            position: absolute;
            right: 15px;
            bottom: 15px;
        }

        .topBtns:hover {
            cursor: pointer;

        }

        .tabFix {
            text-align: center;
            background-color: #F9F9F9;
            color: #F177AE;
            border: 1px solid #E8E8E8 !important;
        }

        .btn {
            width: 100px;
            padding: 10px 5px;
            color: white;
            text-align: center;
            border-radius: 5px;
            background-color: #CF2571;
        }

        .changeTabBtns {
            display: flex;
            background-color: #F9F9F9;
            padding-left: 20px;
            box-sizing: border-box;
            margin: 20px;
        }

        .changeTabBtns>div {
            margin: 30px 15px 30px 15px;
        }

        #table {
            width: 100%;
        }

        #tableBox {
            width: calc(100% - 450px);
            border: 1px solid #ECA7C5;
            border-radius: 5px;
            padding: 25px;
            box-sizing: border-box;
        }

        #table td {
            border: 1px solid red;
            /* border-right: 0; */
            /* border-bottom: 0; */
            border-color: #F4E3EB;
            width: 12.5%;
            padding: 30px;
            margin: 20px;
            border-radius: 5px;
        }

        .tabActive {
            border: 2px solid #E68EB6 !important;
            background-color: #FFF3F8;
            /* color: white; */
        }

        .btn:hover {
            cursor: pointer;
        }

        .choseClass {

            padding: 50px;
            box-sizing: border-box;
            background-color: #F9F9F9;
            width: 400px;
        }

        .classList {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .classList>div {
            width: 100px;
            padding: 10px;
            border: 1px solid red;
            margin: 10px 0;
            text-align: center;
            border-radius: 5px;
            color: #E59AB5;
            border-color: #E899BC;
        }

        .classList>div:hover {
            cursor: pointer;
        }

        .classActive {

            background-color: #CF2571 !important;
            color: white !important;
        }

        ul {
            padding: 0;
            height: auto;
            margin: 0;
            /*padding:20px;*/
            font-size: 0;
            /*需设置定位*/

        }

        li {
            /* width: 125px; */
            height: 40px;
            line-height: 40px;
            /* border-top: 1px solid #5FBDF6;
				border-right: 1px solid #5FBDF6; */
            padding: 0;
            display: inline-block;
            vertical-align: top;
            font-size: 13px;
            text-align: center;
            border: 1px solid #5FBDF6;
            color: #cf2571;
            border: 1px solid #e9cad8;
            margin: 10px 6px;
        }

        #moveSelected {
            position: absolute;
            background-color: blue;
            opacity: 0.3;
            border: 1px dashed #d9d9d9;
            top: 0;
            left: 0;
        }

        .selected {
            background-color: pink;
        }

        .list>ul,
        #firstUl {
            display: flex;
            justify-content: space-between;

        }

        .list>ul>li,
        #firstUl>li {
            flex: 1;
        }

        .textHead {
            display: inline-block;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #cf2571;
            color: #fff3f8;
            margin: 20px 10px;
        }
        .newTck {
			/* margin-top: 12px; */
			height: 32px;
		}
		.newTck i {
			/*display: inline-block;*/
			width: 6px;
			height: 32px;
			background: #cf2571;
			float: left;
		}

		.newTck span {
			margin-left: 20px;
			line-height: 32px;

		}

    </style>
</head>

<body>
    <!-- 顶部分类选择 -->
    <div class="box">
        <div class="newTck">
			<i></i>
			<span>规则</span>
		</div>
        <div class="newUp">
            <span class="textHead">创建规则</span><span class="textHead">编辑规则</span><span class="textHead">删除规则</span>
        </div>
        <div style="display: flex;justify-content: space-between;">

            <div id="tableBox">
                <!-- <table id="table"></table> -->
                <div id="boxAll">
                    <ul id="firstUl"></ul>

                    <ul class="list">
                        <!-- 鼠标拖拽出的遮罩 （定位为  position:absolute）-->
                        <!-- <!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过> -->
                        <div id="moveSelected"></div>
                    </ul>
                </div>
            </div>
            <div class="choseClass">
                <span>选择班级</span>
                <div class="classList">
                    <div class="classActive">初一1班</div>
                    <div>初一2班</div>
                    <div>初一3班</div>
                    <div>初二1班</div>
                    <div>初二2班</div>
                    <div>初二3班</div>
                    <div>初三1班</div>
                    <div>初三2班</div>
                    <div>初三3班</div>
                    <div>高一1班</div>
                    <div>高一2班</div>
                    <div>高一3班</div>
                    <div>高二1班</div>
                    <div>高二2班</div>
                    <div>高二3班</div>
                    <div>高三1班</div>
                    <div>高三2班</div>
                    <div>高三3班</div>
                </div>
            </div>
        </div>

    </div>
    <script>


        var classList = document.getElementsByClassName('classList')[0]
        var classLists = classList.getElementsByTagName('div')
        for (var i = 0; i < classLists.length; i++) {
            classLists[i].onclick = function () {
                for (var j = 0; j < classLists.length; j++) {
                    classLists[j].classList.remove('classActive')
                }
                this.classList.add('classActive')
            }
        }
    </script>
    <script>
        $(window).load(function () {
            var count = 0;
            var data = {
                monday: 1,
                tuesday: 1,
                wednesday: 1,
                friday: 1,
                saturday: 1,
                sunday: 1,
                studyhour: '00:00-00:00,00:00-00:00,00:00-00:00,00:00-00:00,00:00-00:00,00:00-00:00,00:00-00:00,00:00-00:00,00:00-00:00,00:00-00:00,00:00-00:00',
                morning: '5',
                afternoon: '4',
                evening: '6'

            }
            //表头
            var tou = '<li class="week"><span>星期/节次<br></span></li>';
            if (data.monday == '1') {
                tou += '<li num="1"><span>星期一</span></li>';
                count++;
            }
            if (data.tuesday == '1') {
                tou += '<li num="2"><span>星期二</span></li>';
                count++;
            }
            if (data.wednesday == '1') {
                tou += '<li num="3"><span>星期三</span></li>';
                count++;
            }
            if (data.thursday == '1') {
                tou += '<li num="4"><span>星期四</span></li>';
                count++;
            }
            if (data.friday == '1') {
                tou += '<li num="5"><span>星期五</span></li>';
                count++;
            }
            if (data.saturday == '1') {
                tou += '<li num="6"><span>星期六</span></li>';
                count++;
            }
            if (data.sunday == '1') {
                tou += '<li num="7"><span>星期日</span></li>';
                count++;
            }


            $('#firstUl').html(tou);

            var strarr = data.studyhour.split(",");
            var j = 0;
            var s1 = "";
            for (var i = 0; i < count; i++) {
                s1 += '<li num="' + (i + 1) + '" weekday="星期' + (i + 1) +
                    '")"><input type="hidden" value="undefined"></li>'
            }
            var evening = "";
            for (var i = 0; i < data.evening; i++) {
                var i1 = 0;
                i1++;
                evening += '<ul num="' + (i1 + j) + '"><li onclick="listLiFn(' + i + ')" class="bnt"><span>第<i>' + (2 + j) + '</i>节<br> </span></li>' + s1 + '</ul>';
                j++;
            }
            $(".list").html(evening);

            var btn = $(".list li");

            var btnList = $('.list li');
            for (var i = 0; i < btnList.length; i++) {
                (function (i) {
                    btnList[i].onclick = function () {
                        var blockList = $(' .list').find('li');
                        if (btnList[i].className == 'selected') {
                            $(blockList[i]).removeClass('selected')
                        } else {
                            $(blockList[i]).addClass('selected');
                        }

                        console.log("判断class", blockList[i])
                    }
                })(i);
            }

        })


        var moveSelected = $('#moveSelected')[0];
        var flag = false; //是搜开启拖拽的标志
        var oldLeft = 0; //鼠标按下时的left,top
        var oldTop = 0;
        var selectedList = []; //拖拽多选选中的块集合

        // 鼠标按下时开启拖拽多选，将遮罩定位并展现
        $(" .list ").mousedown(function (event) {

            flag = true;
            moveSelected.style.top = event.pageY + 'px';
            moveSelected.style.left = event.pageX + 'px';
            oldLeft = event.pageX;
            oldTop = event.pageY;
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        });
        // 鼠标移动时计算遮罩的位置，宽 高
        $(".list").mousemove(function (event) {
            if (!flag) return; //只有开启了拖拽，才进行mouseover操作
            if (event.pageX < oldLeft) { //向左拖
                moveSelected.style.left = event.pageX + 'px';
                moveSelected.style.width = (oldLeft - event.pageX) + 'px';
            } else {
                moveSelected.style.width = (event.pageX - oldLeft) + 'px';
            }
            if (event.pageY < oldTop) { //向上
                moveSelected.style.top = event.pageY + 'px';
                moveSelected.style.height = (oldTop - event.pageY) + 'px';
            } else {
                moveSelected.style.height = (event.pageY - oldTop) + 'px';
            }
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡



        });
        //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
        $(".list").mouseup(function (event) {

            moveSelected.style.bottom = Number(moveSelected.style.top.split('px')[0]) + Number(moveSelected.style
                .height.split('px')[0]) + 'px';
            moveSelected.style.right = Number(moveSelected.style.left.split('px')[0]) + Number(moveSelected.style
                .width.split('px')[0]) + 'px';
            findSelected();
            flag = false;
            clearDragData();
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        });
        $(".list").mouseleave(function (event) {

            flag = false;
            moveSelected.style.width = 0;
            moveSelected.style.height = 0;
            moveSelected.style.top = 0;
            moveSelected.style.left = 0;
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        });

        function findSelected() {
            var blockList = $(' .list').find('li');
            // $(blockList[ind]).removeClass('selected');
            // $(blockList[ind]).addClass('selected');

            for (var i = 0; i < blockList.length; i++) {
                // console.log("下表222ererttti2",i)
                //计算每个块的定位信息
                var left = $(blockList[i]).offset().left;
                var right = $(blockList[i]).width() + left;
                var top = $(blockList[i]).offset().top;
                var bottom = $(blockList[i]).height() + top;
                //判断每个块是否被遮罩盖住（即选中）
                var leftFlag = moveSelected.style.left.split('px')[0] <= left && left <= moveSelected.style.right.split(
                    'px')[0];
                var rightFlag = moveSelected.style.left.split('px')[0] <= right && right <= moveSelected.style.right.split(
                    'px')[0];
                var topFlag = moveSelected.style.top.split('px')[0] <= top && top <= moveSelected.style.bottom.split('px')[
                    0];
                var bottomFlag = moveSelected.style.top.split('px')[0] <= bottom && bottom <= moveSelected.style.bottom
                    .split('px')[0];
                if ((leftFlag || rightFlag) && (topFlag || bottomFlag)) {
                    selectedList.push(blockList[i]);
                    console.log()
                    if (blockList[i].getAttribute('class') != 'bnt') {
                        console.log(blockList[i].getAttribute('class'))
                        $(blockList[i]).addClass('selected');
                    }

                    // if(blockList[i].getAttribute('class').indexOf('bnt')==-1){

                    // }

                    // console.log("获取内容",$(blockList[i]).addClass('selected').text())
                }

            }
            console.log(selectedList);
        }

        function clearDragData() {
            moveSelected.style.width = 0;
            moveSelected.style.height = 0;
            moveSelected.style.top = 0;
            moveSelected.style.left = 0;
            moveSelected.style.bottom = 0;
            moveSelected.style.right = 0;
        }

        $("body").click(function (e) {
            if (!$(e.target).closest("#boxAll").length) {
                var lis = document.getElementsByTagName('li')
                for (var i = 0; i < lis.length; i++) {
                    lis[i].classList.remove('selected')
                }
            }
        });
    </script>
</body>

</html>
小四是个处女座
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
jQueryUI拖拽效果_拖拽div的值到table表格里面
06-29
jQueryUI拖拽效果_拖拽div的值到table表格里面，jQueryUI拖拽效果_拖拽div的值到table表格里面（html）
纯js 表格生成，拖拽选择
xiaosi1413的博客
01-14 531
纯js 表格生成，拖拽选择 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap-grid.css" rel="stylesheet"> &
vue中实现拖拽选中节点（如选中日历）
最新发布
wjq_xxq的博客
05-17 355
利用mousedown和mouseMove方法来实现。
原生 js 实现 table 标签拖拽表头
cloki的博客
11-14 586
原生 js 实现 table 标签拖拽表头
Sortable.js实现可拖拽Table组件
yang_da_da的博客
03-01 3151
目标 vue项目中实现一个可拖拽的Table组件，并保存拖拽后的顺序 安装Sortable $ npminstallsortablejs--save 代码实现 创建DragableTable.vue文件，定义template和props <template> <div> <Table ref="table" :columns...
JS拖动选择table里的单元格完整实例【基于jQuery】
10-16
主要介绍了JS拖动选择table里的单元格,结合完整实例形式分析了基于jQuery的table表格动态操作相关实现技巧,涉及事件响应及页面元素属性动态操作使用方法,需要的朋友可以参考下
jQuery实现鼠标可拖动调整表格列宽度
10-25
主要介绍了通过jQuery实现鼠标可拖动调整表格列宽度,需要的朋友可以参考下
表格拖动排序
04-08
表格行拖动排序，非常实用，支持ajax，拖动后的顺序可保存。
拖拽表格行插件
04-25
可拖拽表格行，许多参数可参考官网（‘#table’）.tablednd()
js表格列拖动排序代码
06-24
js表格列拖动排序代码是一款单击鼠标长按表格列自由拖动排序，互换列排序效果代码，点击表格头部支持升降大小排序效果代码。
鼠标拖动表格中的数据，表格美化（系列二）
黑色头发
08-13 215
效果图：表格上边的文字可以通过鼠标的拖拽到下边的表格内 代码： [code="html"] WebForm2 /*--------全局变量-----------*/ var x0...
使用SortableJS插件实现el-table列表拖拽
一个超爱喝可乐的web前端攻城狮
04-01 1065
使用SortableJS插件实现el-table列表拖拽 下载SortableJS到项目中 npm install sortablejs --save html(row-key=“id”)必须唯一 <el-table :data="list" stripe row-key="id" style="width: 100%"> <el-table-column prop="name" label="姓名" align="center" /> <el
js html表单设计器,可视化表单设计器拖拽生成表单(原创)
weixin_35761085的博客
06-05 1252
插件描述：可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。更新时间：2021-04-11 21:56:01form-create-designerform-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。安装npminstall...
Vuejs动态表单，拖拉拽生成
热门推荐
J、wen的博客
03-24 2万+
vue拖拉拽动态表单 之前写了一个jquery的拖来拽表单，但是用到vue项目，太麻烦，于是有重写了一边，虽说差不多，但是对vue还不太了解，写了一个大概，大家不会的可以参考一下，改一改。 jquery/Bootstrap表单动态拖拉拽添加 先分享代码了 ，原理可以看上面jquery的原理，差不多的。 <template> <div class="box"> <h4>这是发布页面<
jQuery拖拽元素到表格单元格
ICode联盟
04-03 252
下载地址 使用jQueryUI代码实现的拖拽标签到Table表格单元格里，这样的做法可以提高用户体验。 dd:
vue.draggable拖拽生成课程表
yolo_link的博客
06-29 2610
根据数据源提供的科目及教师信息，拖拽至空白课表内，生成一份课表。首先科目有多个，教师也有多个。数据源部分做一个切换选择科目的效果，选取科目后，提供科目及授课人名字。课表可以是一张空白课表，也可以默认指定某日某节某人某课。 课表使用表格呈现，这样区域方便划分。 表头是工作日，表体部分的第一列是节次。为了更方便查看，最左边设计上中下午段的划分。拖拽效果有比较成熟的组件库了：Vue-Draggable。 它是基于Sortable.js实现的，适用vue项目，可以在pc端使用也可以在移动端使用......
html 拖拽选择表格,JS拖动选择table里的单元格完整实例【基于jQuery】
weixin_29158047的博客
06-03 968
本文实例讲述了JS拖动选择table里的单元格。分享给大家供大家参考，具体如下：用JS 实现类似Excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。www.gxlcms.com JS拖动选择table里的单元格.table-container {width: 100%;overflow-y: auto;_overflow: auto;margin: 0 0 1em;ba...
js前端导出excel，结合table列拖拽换位和勾选显示
SDAW_1的博客
07-22 656
拖拽 结合表头拖拽换位和勾选显示
boostrap table实现行拖拽调整排序
u011562082的博客
02-15 4174
boostrap table实现行拖拽调整排序. 排序前 排序后 boostrap table拖拽实现行重新排序代码详解 1、引入相关的js文件 &lt;script type="text/javascript" src="${webAppPath}/static/js/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="tex...
Word从某个表格开始选择
05-17
3. 如果您只想选择表格的一部分，请拖动鼠标以选择所需的单元格。 4. 如果您想选择表格中的整行或整列，请单击行或列的标题，然后按住Shift键并单击另一个标题。 5. 如果您想选择多个不相邻的单元格、行或列，请...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小四是个处女座

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值