列表拖拉效果

最新推荐文章于 2025-08-07 22:25:00 发布

导盲犬

最新推荐文章于 2025-08-07 22:25:00 发布

阅读量573

点赞数

CC 4.0 BY-SA版权

文章标签： function stylesheet table html null border

本文链接：https://blog.youkuaiyun.com/huangyp2008/article/details/4022192

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Drag Drop Demo </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.dd {float:right;z-index:6;cursor:e-resize;cursor:col-resize;height:100%;width:6px;}
.region {position:absolute;left:100px;top:30px;width:600px;padding:10px;height:360px;border:1px solid #fc0;overflow:hidden;}

table {width:100%;border:1px solid #699;margin:1px 0 5px 0; border-collapse:separate;border-spacing:1px !important;border-spacing:expression(this.cellSpacing=1);}

th {background:#ccc;}
td {background:#9cc;}
</style>
</HEAD>
<BODY>

<div class='region'>
    <table id='grid' cellpadding='1'>
      <tr><th>head</th><th>head</th><th>head</th><th>head</th></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
    </table>
<div id='msg' style='padding:10px;background:#ccc;'>  </div>
</div>
</BODY>
</HTML>

<script>
var dgdp={};
function $(s) {return document.getElementById(s); }
function add(obj)
{
var htm = obj.innerHTML;
obj.innerHTML = '';
var ele = document.createElement('div');
ele.className='dd';
if (dgdp.ie<1) ele.innerHTML=' ';
obj.appendChild(ele);
var txt = document.createElement('span');
txt.innerHTML = htm;
obj.appendChild(txt);
ele.onmousedown = function(evt) { drag(evt,ele); }
}

function drag(evt,obj)
{
if (!evt) evt = window.event;
dgdp.x = evt.clientX;
dgdp.cw = obj.parentNode.offsetWidth;
dgdp.tw = dgdp.t.offsetWidth;
var x = evt.clientX + document.body.scrollLeft - obj.offsetLeft;
if(obj.setCapture) obj.setCapture();
else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

document.onmousemove = function(evt)
{
    if (!evt) evt = window.event;
    var nw = dgdp.cw + evt.clientX - dgdp.x;
    $("msg").innerHTML = nw;
    if(nw>0)
    {
      dgdp.t.style.width = dgdp.tw + evt.clientX - dgdp.x;
      obj.parentNode.style.width = nw;
    }
}

document.onmouseup = function()
{
    if(obj.releaseCapture) obj.releaseCapture();
    else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    document.onmousemove = null;
    document.onmouseup = null;
}
}
function js_init()
{
dgdp.t = $('grid');
dgdp.ie = (/msie/i.test(navigator.userAgent)?1:0);
var cells = $('grid').rows[0].cells;
var len = cells.length;
for (var i=0; i<len; i++) add(cells[i]);
}
js_init();
</script>