<html>
<head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#bdiv").mousedown(function(e){//鼠标按下绑定鼠标移动事件
var lex = e.pageX;
$("#bdiv").mousemove(function(event){
$(this).scrollLeft($(this).scrollLeft() - (event.pageX - lex));
lex = event.pageX;
});
});
$("#bdiv").mouseup(function(event){//鼠标松开，释放绑定事件
$(this).unbind("mousemove");
});
});
</script>
<style>
html,body { overflow:hidden; height:100%}
.ywzb { width: 100%; border:none; text-align:center; cursor: pointer;}
.ywzb tr td { border: 1px solid #333; border-collapse:collapse; }
.ttl { font-size:14px; font-weight:bold;}
.cttl { font-size:12px;}
.scrol {overflow-x: scroll; width:100%;}
.scrol table {width:2500px;}
.warn { background-color: #FBB; border: 1px solid #333;}
</style>
<title>可鼠标拖动的表格</title></head>
<body>
<div class="scrol" id="bdiv">
<table width="2000" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
效果总感觉有点点不对劲，希望能得到高人指点。感觉拖动效果没那么理想。
相关推荐
- 使用`滚动条的属性`读取滚动条位置，调整表格显示区域。 通过这些基本技巧，结合易语言提供的丰富库函数，你可以创建出一个功能完备、用户体验良好的模拟Excel表格应用。这个源码文件“模拟Excel表格的鼠标移动...
4. 数据分析：在数据分析软件中，滚动条配合表格，让用户方便地查看和分析大量数据。 综上所述，控制列表滚动条的方法对于电子装置的用户体验至关重要。良好的滚动条设计不仅能提高效率，还能增强用户对产品的满意...
为了实现精准定位，你需要在信号槽函数中根据滚动条的位置计算出当前显示的表格区域，并相应地调整模型的索引范围。这可能涉及到对QModelIndex和QAbstractItemModel的深入理解。 对于表格可拖动大小，QTableView...
1. 数据表格：在处理大量数据时，鼠标拖动翻页可以减少用户在滚动条上的频繁操作，使查看和分析数据更加方便。 2. 长文章阅读：在阅读长篇内容时，用户可以通过拖动鼠标快速浏览上下文，避免了传统滚动条的来回滚动...
要实现jQuery拖动表格宽度的功能，可以利用`mousedown`、`mousemove`和`mouseup`这三个事件。`mousedown`用于监听鼠标按下，`mousemove`用于监听鼠标移动，而`mouseup`则是在鼠标释放时触发。以下是一个基本的实现...
- **表格数据展示**：当表格中的数据量很大时，可以使用横向滚动条来展示所有列。 - **导航菜单**：在某些设计中，可能会使用横向滚动条来展示过长的导航菜单项。 #### 五、总结 通过上述分析可知，横向滚动条是一...
本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中，通过拖动表头来任意调整列宽度的功能，这个功能适用于各种列表页面，如数据展示、报表分析等场景。 首先，我们需要引入jQuery库，它是...
"table 列可左右拖动"的功能使得用户可以根据需要调整列宽，提高用户体验，特别是当表格内容较多，需要横向滚动条时，用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点： 1. **...
这可以通过监听滚动事件，计算出滚动条的位置，并相应地改变表头的CSS样式（如`position`、`top`等）来实现。这样，用户可以更容易地对比数据，特别是在长表格中。 总结起来，"js技术,html表格列宽自由拖动并cookie...
3. 双向滚动条：同时具有垂直和水平滚动条，常见于查看表格或代码编辑器等多维度内容的场景。 三、滚动条的交互方式 1. 鼠标操作：用户可以通过鼠标滚轮滚动，或者点击并拖动滑块来移动内容。 2. 键盘操作：使用...
然而，当用户尝试使用鼠标滚轮在这些子控件上滚动时，却发现滚动条无法被触发，只能手动拖动滚动条来实现滚动。 这个问题的根源可能在于以下几点： 1. **默认事件处理**：LayoutControl可能捕获了滚轮事件，阻止了...
3. **用户交互**：自定义滚动条需要处理鼠标点击和拖动事件，以实现滚动功能。可能需要用到MouseDown、MouseMove和MouseUp事件。 4. **自定义控件**：可能需要创建一个继承自System.Windows.Forms.VScrollBar...
滚动条的使用可以极大地提高用户与电子表格的交互性，特别是在处理大量数据或者需要动态调整参数的情况下。比如在计算梯形面积的例子中，我们可以预先设定好上底、下底、高的值以及相应的面积公式，然后通过插入滚动...
成功解决ARM下qt4.7，tablewidget的scroll的宽度设置问题
而滚动效果可能通过CSS或JavaScript实现，确保当表格内容超出可视区域时，用户可以通过滚动条查看所有数据。 文件名“table”可能是指包含表格相关代码的文件，这可能包括HTML结构、CSS样式和JavaScript逻辑。在PHP...
例如，你可以用`::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 选择器来分别定制滚动条的整体结构和拖动部分。 ```css /* 定义滚动条的宽度 */ ::-webkit-scrollbar { width: 12px; /* 这里的数字代表滚动...
- 滚动条：JavaScript可以控制页面滚动，如创建平滑滚动效果，或者自定义滚动条样式。 - 动态加载：通过Ajax技术，实现页面内容的异步加载，提高用户体验。 - 背景动画：改变背景颜色、图像或视频，实现动态背景...
- 滚动条：水平和垂直滚动，用于移动编辑窗口 - 状态栏：显示当前工作状态，如字数统计、页码等 3. **输入法的选择和切换**： - 单击任务栏上的输入法图标 - 使用快捷键Ctrl+Shift切换输入法，Ctrl+空格进行中...
- 鼠标拖动垂直滚动条上端进行拆分。 - 双击垂直滚动条上端进行平均拆分。 - 使用“窗口”菜单的“拆分”命令。 8. **键盘移动插入点快捷键**： - 左箭头/右箭头：左右移动。 - 上箭头/下箭头：上下移动。 - ...
修改高级表格支持库在表格空白处（所有单元格之外）单击鼠标导致当前光标处单元格自动进入编辑状态的BUG。 14. 修改扩展界面支持库一，为“超级列表框”增加“检查框状态被改变”事件。 15. 修改扩展界面支持库一...