表格单元格间数据的拖拽

最新推荐文章于 2022-09-30 23:28:54 发布
最新推荐文章于 2022-09-30 23:28:54 发布
阅读量172 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lunawzh/p/4888625.html
版权 
<!DOCTYPE HTML>
<html>
<style>
    td{
        border:1px solid #444;
        padding:20px;
        width:100px;
        height:50px;
    }
    td div{
        cursor:pointer;
    }
    table{
       
    }
</style>
 
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<body>
        <p>asldflasl</p>
    <table>
        <tr>
            <th>
            a
            </th><th>
b
</th><th>
c
</th><th>
d
</th><th>
   e
</th>
        </tr>
        <tr>
            <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="div1" class="tablediv" draggable="true" ondragstart="drag(event)" >1111111</div>
            </td>
            <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="div2" class="tablediv" draggable="true" ondragstart="drag(event)" >2222222</div>
            </td>
            <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="div3" class="tablediv" draggable="true" ondragstart="drag(event)" >333333333</div>
            </td>
            <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="div4" class="tablediv" draggable="true" ondragstart="drag(event)" >4444444444</div>
            </td>
            <td>
                <div class="tablediv">555555555555</div>
            </td>
        </tr>
    </table>


</body>
</html>

转载于:https://www.cnblogs.com/lunawzh/p/4888625.html

weixin_33842328
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table表格拖拽
weixin_45293780的博客
06-22 1042
table表格拖拽 1.新建js文件注册自定义指令 // 设置样式 function setStyle($tr,finallIndex,callback1,callback2){ // callback1:默认样式设置,callback2:拖动的时候样式 for(let tri = 0;tri<$tr.length;tri++){ // 遍历tr,将th和td放到最终的位置上 const itemtr = $tr[tri]; if(itemtr.getElementsByTagNa
改进的table单元格拖拽，可限制能拖动的连续单元格范围
ForMyQianDuan的博客
11-14 1571
html> HEAD> META http-equiv="Content-Type" content="text/html; charset=gb2312"> TITLE>拖动TITLE> STYLE> td { width: 20%; height: 20px; border-bott
Luckysheet(在线表格) v2.1.12
字节网盘SEO工具
01-30 2203
简介： Luckysheet是完全开源的一个类似于excel的在线表格，内置格式设置、单元格、行和列操作、撤销、重做、选区拖拽、公式和函数、表格操作等功能，还提供了图表、数据透视表、截图、插入图片等增强功能，支持EXCEL导入及导出，功能丰富全面，基本可以满足日常办公需求。 软件特色： 格式设置：样式，条件格式，文本对齐及旋转，文本截断、溢出、自动换行，多种数据类型，单元格内多样式 单元格：拖拽，下拉填充，多选区，查找和替换，定位，合并单元格，数据验证 行和列操作：隐藏、插入、删除行或列，冻结，文本分列
【开源组件】- 表格处理 - Luckysheet
最新发布
qq_43843951的博客
09-30 21万+
使用Luckysheet实现前端从服务器中获取excel文件，通过luckysheet插件在线编辑，完成后将此文件传送到服务器保存。
单元格拖拽
学如逆水行舟，不进则退
12-20 409
new document table{width: 600px; height: 600px;} td.selected{background: #cfe6fd;} #info{text-align:center;width:600px;font-size:40px;}
Qt实现Tree--＞Table和Chart拖拽
qq_34790664的博客
03-23 947
Qt实现Tree-->Table和Chart拖拽环境说明实现Tree-->Table和Chart拖拽的原因实现的功能可参考的例子界面展示 环境说明 Qt版本：5.12 Mingw32 操作系统：win10 实现Tree–>Table和Chart拖拽的原因 为了提升显示的效果。 实现的功能 将窗口中左边的信息拖到右边 可参考的例子 Qt实现Table–＞Table拖拽功能 因为别人托我做的一个小软件，还答应给一些报酬的，所以这部分的程序目前不能提供出来，只能展示一下最后的效果。 界面展示
Qt可拖拽排序表格（解决滚动条不兼容问题，类似QQ好友分组排序）
木风可可的博客
04-29 3965
【代码】Qt可拖拽排序表格（解决滚动条不兼容问题，类似QQ好友分组排序）
基于EXT2.0.2表格间数据拖拽
07-21
在这个特定的场景中，我们将探讨“基于EXT2.0.2表格间数据拖拽”的实现。 EXT2.0.2中的数据拖拽功能，主要是通过DragDrop（DD）和DragDropGroup（DDG）组件来实现的。DragDrop组件允许用户将元素从一个位置拖动到另...
jQuery实现拖动调整表格单元格大小的代码实例
10-24
在本文中，我们将深入探讨如何使用jQuery实现拖动调整表格（table）单元格（td）大小的功能。这个特性在某些情况下非常实用，比如当用户需要自定义表格布局以适应不同数据展示需求时。以下是一个详细的步骤解析和...
flex表格间数据的拖拽
05-28
实现数据拖拽的关键在于利用Flex的DragManager和DropManager类。DragManager负责处理拖动的启动、执行和结束，而DropManager则管理目标区域的接收和响应。在两个DataGrid之间进行数据拖放时，我们需要为源DataGrid的...
Qt下QTablewidiget之间的拖放功能
11-30
模仿QT自带Drag和Drop例子实现针对两个表格之间行数据的拖放。
QT实现可拖拽排序的表格
09-26
QT实现可拖拽行排序的表格，研究了一天实现的自定义控件。 效果类似QQ好友分组的拖动排序功能，非常流畅，内含我对表格的常用初始化代码和样式设置。具体内容见博客分类“Qt实用技术”内文章。
html5实现单元格内容拖拽替换
05-02
简单，下载下来即可使用，可根据自己需求更改！！！！！！！！！！！！！
JS拖动选择table里的单元格完整实例【基于jQuery】
10-16
在本教程中，我们将探讨如何使用JavaScript和jQuery实现一个功能，允许用户在HTML表格中拖动选择多个单元格。这个功能对于数据管理或类似于电子表格的应用非常有用，它提供了直观的用户交互体验。 首先，我们需要在...
写的htc的数据表格
10-31
- `.GridBorder`类设置了表格单元格的样式，包括背景色、边框等。 - `body { background:#ECE9D8 }`设置整个页面的背景颜色。 - `td { border:1px solid #c0c0c0; display:inline }`定义了单元格的边框和显示方式...
Qt实现Table--＞Table拖拽功能
qq_34790664的博客
03-23 3126
Qt实现Table-->Table拖拽环境说明实现Table-->Table拖拽的原因实现的功能多窗口间的数据通信 环境说明 Qt版本：5.12 Mingw32 操作系统：win10 实现Table–>Table拖拽的原因 说实在的，啥用没有，就是为了显得比按钮点击要高大上一点。 实现的功能 将窗口中左边的信息拖到右边 //parentwindow.h private: ChidWindow *childwindow； //parentwindow.cpp childwindow=ne
C# dataGridView表格，可以鼠标拖动替换单元格行
selaginella的专栏
04-25 3304
需要实现dataGridView中的 CellMouseMove、DragDrop、CellMouseDown、SelectionChanged、DragEnter 5个事件。 代码如下： int selectionIdx; //下方为鼠标拖动表格事件 private void dataGridView1_CellMouseMove(ob
table单元格拖拽(vue)
weixin_33859231的博客
06-26 1991
说明： 项目涉及到手动排课需要单元格拖拽互换课程开始使用的onmousedown实现，看到element tree控件增加了拖拽功能做了单元格拖拽。 修改element： clone element项目找到packages>table 1.更改element table-body.js return ( <td ...
Excel单元格合并与数据分析技巧
接着，通过鼠标拖动D1单元格右下角的填充柄（"+"标志），可以快速将合并操作应用到指定范围，从而实现B和C两列数据的汇总。 在进行这项操作时，需要注意以下几点： 1. **数据备份**：在进行合并前，最好先将D列的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值