<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> <
改进的table单元格拖拽,可限制能拖动的连续单元格范围
最新推荐文章于 2023-12-22 14:38:48 发布
这是一个HTML5实现的表格单元格拖动功能的示例,允许用户在特定范围内(2,3,4列)进行行内拖动交换内容。通过JavaScript脚本`dragTableCellHandV.js`和`dragedTableData.js`实现,拖动时会显示过渡效果,并限制了拖动范围,确保交互的连贯性。"
96380624,4932723,Spring Cloud OAuth2.0 开发常见问题及解决方案,"['spring cloud', 'OAuth2.0', 'Spring Security']
摘要由CSDN通过智能技术生成