<script>
var drag_left = 0;
var mouse_downX = 0;
function drag_event_mousedown(e) {
var e, obj, temp;
e = window.event ? window.event : e;
obj = document.getElementById("drag");
drag_left = obj.offsetLeft;
mouse_downX = e.clientX;
document.onmousemove = document_event_mousemove;
temp = document.attachEvent ? document.attachEvent("onmouseup", document_event_mouseup) : document.addEventListener("mouseup", document_event_mouseup, "");
}
function document_event_mousemove(e) {
var e, obj;
e = window.event ? window.event : e;
obj = document.getElementById("move");
with (obj.style) {
width = drag_left + (e.clientX - mouse_downX) + "px";
}
}
function document_event_mouseup(e) {
document.onmousemove = "";
td_width = document.getElementById("drag").style.width;
}
</script>
</head>
<body>
<table style=" 100%; height: 1000px" border="1px" cellpadding="0" cellspacing="0">
<tr>
<td id="move" style=" 180px; height: 1000px; vertical-align: text-top">ddddd
</td>
<td id="drag" onmousedown="drag_event_mousedown(arguments[0]);" style=" 1px; height: 1000px; vertical-align: text-top; cursor: e-resize;"></td>
<td id="content" style="height: 1000px; background-color: Transparent; text-align: left; vertical-align: top;">fffffffffffffffffffffffffffffffffffffff
</td>
</tr>
</table>
</body>
Jquery方式
<style type="text/css">
#container {
600px;
height: 600px;
background-color: #999999;
}
#markline {
border-left: 1px solid #00686b;
height: 333px;
position: absolute;
display: none;
cursor: col-resize;
}
</style>
<script src="../Script/jquery-1.9.1.js"></script>
<script>
$(function () {
var mark_move = false;
$("#canMove").mousedown(function (e) {
mark_move = true;
$("#markline").css("display", "block");
});
$(document).mousemove(function (e) {
if (mark_move) {
$("#markline").offset({ left: e.pageX });
}
});
$(document).mouseup(function () {
mark_move = false;
$("#markline").css("display", "none");
});
})
</script>
</head>
<body>
<div id="markline">
</div>
<div id="container">
<div style=" 2px; height: 40px; background-color: #00ff21; cursor: col-resize;" id="canMove"></div>
</div>
</body>