javascript 拖动鼠标改变两个单元格的界线，（菜单|页面、样式的主页面）

最新推荐文章于 2025-08-13 13:36:53 发布

原创最新推荐文章于 2025-08-13 13:36:53 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在表格单元格之间通过添加一个小单元格来触发鼠标事件的方法，以此实现拖拽调整单元格宽度的功能。文章提供了具体的JavaScript代码示例，并讨论了如何限定拖拽的有效范围。

<td onmousedown="down()" onmousemove="move()" onmouseup="up()" style = "CURSOR: w-resize" width = "1">////////各种样式自己调节，

我的思路是在两个单元格之间加一个小的单元格来触发事件，.........

var dragable=false;//标志

var srcElement;//对象

//鼠标按下

function down() {

srcElement = event.srcElement;//保证全局为同一对象

dragable=true;
srcElement.setCapture();//让一个元素可以捕获所有的鼠标事件。
}

//鼠标移动
function move() {
if(dragable==true){
if(event.clientX<10 ||event.clientX > 300){//假设有效拖动范围
dragable=false
srcElement.releaseCapture();//用alert()或者releaseCapture()，打断当前的鼠标捕获。
}else{
treemenu.style.width = event.clientX;//treemenu 为td 的ID
}
}
}
//鼠标弹起
function up() {
dragable=false;
srcElement.releaseCapture();//用alert()或者releaseCapture()，打断当前的鼠标捕获。

}

******************************************

**************************这样鼠标越界也可以继续回来拖动**************************

//鼠标移动
function move() {
if(dragable==true){
if(event.clientX>10 &&event.clientX <300){//假设有效拖动范围
treemenu.style.width = event.clientX;//treemenu 为td 的ID
}
}

*********************http://blog.sina.com.cn/s/blog_702c83b70100tm07.html************Event的一些基本属性的含义（参考，貌似这哥们用的是火狐，IE 的实现方法稍微有点不同）