改进的table单元格拖拽，可限制能拖动的连续单元格范围

最新推荐文章于 2022-07-20 17:47:45 发布

ForMyWebFrontSide

最新推荐文章于 2022-07-20 17:47:45 发布

阅读量1.5k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/49840233

版权

这是一个HTML5实现的表格单元格拖动功能的示例，允许用户在特定范围内（2,3,4列）进行行内拖动交换内容。通过JavaScript脚本`dragTableCellHandV.js`和`dragedTableData.js`实现，拖动时会显示过渡效果，并限制了拖动范围，确保交互的连贯性。" 96380624,4932723,Spring Cloud OAuth2.0 开发常见问题及解决方案,"['spring cloud', 'OAuth2.0', 'Spring Security']

摘要由CSDN通过智能技术生成

<html>
<HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>拖动</TITLE>
</HEAD>
<STYLE>
    table {
        border: 1px solid black;
        font-size: 18px;
        color:#464040;
        font-weight: bold;
    }
    th {
        height: 40px;
        font-size: 20px;
        font-weight: bold;
        /*border-bottom: 2px solid black;*/

    }
    td {
        width: 20%;
        height: 40px;
        border-top: 1px solid black;
        border-right: 1px solid black;
        cursor: default;
        text-align: center;
    }
    td:nth-child(2){
        background: #C1DBF5;
    }
    td:nth-child(3){
        background: #C1DBF5;
    }
    td:nth-child(4){
        background: #C1DBF5;
    }
    .dvMove {
        font-size: 12px;
        width: 85%;
        height: 90%;
        background: #3B9DFF;
        border:1px solid gray;
        margin: 0 auto;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
    }






</STYLE>
<BODY οncοntextmenu="return false;">
<TABLE id="tableId" width="80%" align="center" cellpadding="0" cellspacing="0">
    <tbody>
    <TR>
        <TH colspan="5" style="">拖动交换单元格内容（限制了拖拽的范围为2,3,4列，且只能在行内拖动）可自己设定</TH>
    </TR>
    <TR>
        <TD>
            <div class="dvMove">J</div>
        </TD>
        <TD class="moveCol a1 a2">
            <div class="dvMove">Java</div>
        </TD>
        <TD class="moveCol">
            <div class="">nn</div>
        </TD>
        <TD class="moveCol"><div class="dvMove">mm</div></TD>
        <TD>m1</TD>
    </TR>
    <TR>
        <TD>
            <div class="dvMove">v123</div>
        </TD>
        <TD class="moveCol">
            <div class="">C++</div>
        </TD>
        <TD class="moveCol">
            <div class="dvMove">Visual Studio</div>
        </TD>
        <TD class="moveCol">
            <div class="">Office</div>
        </TD>
        <TD>Windows</TD>
    </TR>
    <TR>
        <TD>m124</TD>
        <TD class="moveCol">PhotoShop</TD>
        <TD class="moveCol">
            <div class="">Java</div>
        </TD>
        <TD class="moveCol">
            <div class="dvMove">Illustrator</div>
        </TD>
        <TD>
            <div class="dvMove">PageMaker</div>
        </TD>
    </TR>
    <TR>
        <

最低0.47元/天解锁文章

ForMyWebFrontSide

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
改进的table单元格拖拽，可限制能拖动的连续单元格范围

html>HEAD> META http-equiv="Content-Type" content="text/html; charset=gb2312"> TITLE>拖动TITLE> STYLE> td { width: 20%; height: 20px; border-bott
复制链接

扫一扫

专栏目录