Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Помогите с resize-ом столбцов таблыцы

Автор: GrafF812 26.8.2010, 19:15

Здравствуйте. У есть вот такая таблица

Код


<html>
<head>
    <style>
        .tableview{
            border-collapse: collapse;
        }
        
        .cellview{
            border: 1px solid rgb(0,0,0);
        }
        .cellview-inner{
            height: 34px;
        }
        .kix-boxview{
            left: px;
            top: 9px;
        }
        .boxview-content{
            width: 141px;
            padding: 7px;
        }
        .lineview{
            height: 20px;
            direction: ltr;
            text-align: left;
        }
        .lineview-content{
            margin-left: 0px;
            padding-top: 0px;
        }
        .lineview-content SPAN{
            font-size: 11pt;
            font-family: Arial;
            color: rgb(0,0,0);
            background-color: transparent;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
            vertical-align: baseline;
        }
        div.cDrag div {
        background: repeat scroll 0 0 transparent;
        cursor:col-resize;
        display:block;
        float:left;
        height:24px;
        position:absolute;
        width:5px;
        border: 1px solid rgb(0,0,0);
        }
    </style>
</head>
    <body>
    <div class="cDrag" style="top: 27px;">
        <div style="height: 110px; left: 163px;"></div>
        <div style="height: 110px; left: 321px;"></div>
        <div style="height: 110px; left: 479px;"></div>
    </div>
        <table class="tableview">
            <tbody>
                <tr>
                    <td class="cellview">
                        <div class="cellview-inner">
                            <div class="kix-boxview">
                                <div class="boxview-content">
                                    <div class="lineview">
                                        <div class="lineview-content">
                                            <span>текст</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="cellview">
                        <div class="cellview-inner">
                            <div class="kix-boxview">
                                <div class="boxview-content">
                                    <div class="lineview">
                                        <div class="lineview-content">
                                            <span>текст</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </td>
                    <td class="cellview">
                        <div class="cellview-inner">
                            <div class="kix-boxview">
                                <div class="boxview-content">
                                    <div class="lineview">
                                        <div class="lineview-content">
                                            <span>текст</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                        <td class="cellview">
                            <div class="cellview-inner">
                                <div class="kix-boxview">
                                    <div class="boxview-content">
                                        <div class="lineview">
                                            <div class="lineview-content">
                                                <span>текст</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                </tr>
                    <tr>
                        <td class="cellview">
                            <div class="cellview-inner">
                                <div class="kix-boxview">
                                    <div class="boxview-content">
                                        <div class="lineview">
                                            <div class="lineview-content">
                                                <span>текст</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cellview">
                            <div class="cellview-inner">
                                <div class="kix-boxview">
                                    <div class="boxview-content">
                                        <div class="lineview">
                                            <div class="lineview-content">
                                                <span>текст</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cellview">
                            <div class="cellview-inner">
                                <div class="kix-boxview">
                                    <div class="boxview-content">
                                        <div class="lineview">
                                            <div class="lineview-content">
                                                <span>текст</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cellview">
                            <div class="cellview-inner">
                                <div class="kix-boxview">
                                    <div class="boxview-content">
                                        <div class="lineview">
                                            <div class="lineview-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="cellview">
                            <div class="cellview-inner">
                                <div class="kix-boxview">
                                    <div class="boxview-content">
                                        <div class="lineview">
                                            <div class="lineview-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cellview">
                            <div class="cellview-inner">
                                <div class="kix-boxview">
                                    <div class="boxview-content">
                                        <div class="lineview">
                                            <div class="lineview-content">
                                                <span>текст</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                            <td class="cellview">
                                <div class="cellview-inner">
                                    <div class="kix-boxview">
                                        <div class="boxview-content">
                                            <div class="lineview">
                                                <div class="lineview-content">    
                                                    <span>текст</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        <td class="cellview">
                            <div class="cellview-inner">
                                <div class="kix-boxview">
                                    <div class="boxview-content">
                                        <div class="lineview">
                                            <div class="lineview-content"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
            </tbody>
        </table>
    </body>            
</html>

моя задача сделать столбцы этой таблицы перемещаемыми. Я вставил 3 вертикальных DIV-a, мне нужно написать код на JS, с помощью которого я мог бы мышкой схватить за этот DIV и таким образом изменить ширину столбца таблицы.
Помогите мне пожалуйста написать такой обработчик.
P.S: кстати почему-то в IE эти DIV-ы съезжают вправо, в остальных браузерах все ровно.

Автор: Amphiluke 26.8.2010, 21:21

Хм, интересная задачка… smile

Мне лень разбираться в вашем коде с тысячей ступенек, но вот, просто попробовал сделать таблицу с растягиваемыми в ширину столбцами. Может потребовать легкой доработки smile

под конкретную задачу, но общий смысл, наверное, будет ясен.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    td {
        border-right: 4px ridge #339966;
    }
</style>
<script type="text/javascript">
    var inDrag = false;
    var tdDrag = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function downHandler(e) {
        if (!e) e = event;
        var sender = (e.target) ? e.target : e.srcElement;
        if (sender.nodeName.toLowerCase() != "td") return true;
        var left = getTruthPos(sender);
        var width = sender.offsetWidth;
        inDrag = ((Math.abs(e.clientX - left) < 10) || (Math.abs(e.clientX - left - width) < 10));
        if (inDrag) tdDrag = sender;
    }
    function upHandler(e) {
        inDrag = false;
        tdDrag = null;
    }
    function moveHandler(e) {
        if (!e) e = event;
        var sender = (e.target) ? e.target : e.srcElement;
        if (!inDrag) return true;
        var left = getTruthPos(tdDrag);
        var width = tdDrag.offsetWidth;
        var newWidth = e.clientX - left;
        if (newWidth > 0)
            tdDrag.style.width = newWidth.toString() + "px";
    }
    function cursorHandler(e) {
        var tb = document.getElementById("resizeTbl");
        if (!e) e = event;
        var sender = (e.target) ? e.target : e.srcElement;
        if (sender.nodeName.toLowerCase() != "td") return true;
        var left = getTruthPos(sender);
        var width = sender.offsetWidth;
        if ((Math.abs(e.clientX - left) < 10) || (Math.abs(e.clientX - left - width) < 10)) {
            tb.style.cursor = "e-resize";
        } else {
            tb.style.cursor = "default";
        }
    }
    function setResizeHandlers(e) {
        var tb = document.getElementById("resizeTbl");
        registerHandler(document, "mousedown", downHandler);
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "mousemove", cursorHandler);
    }
    
    
    registerHandler(window, "load", setResizeHandlers);
</script>
</head>

<body>
    <div style="left:100px; top:100px;">
    <table border="2" rules="all" id="resizeTbl">
        <tr>
            <td>_____1.1_____</td>
            <td>_____1.2_____</td>
            <td>_____1.3_____</td>
            <td>_____1.4_____</td>
            <td>_____1.5_____</td>
        </tr>
        <tr>
            <td>_____2.1_____</td>
            <td>_____2.2_____</td>
            <td>_____2.3_____</td>
            <td>_____2.4_____</td>
            <td>_____2.5_____</td>
        </tr>
        <tr>
            <td>_____3.1_____</td>
            <td>_____3.2_____</td>
            <td>_____3.3_____</td>
            <td>_____3.4_____</td>
            <td>_____3.5_____</td>
        </tr>
    </table>
    </div>
</body>
</html>

Добавлено через 5 минут и 11 секунд
Как-то туговато, правда, тягается, если растянуть таблицу на всю ширину окна.

Автор: dеluxe 26.8.2010, 21:43

Amphiluke, хм, прикольно) это работает!, js всемогущий в умелых руках smile

Автор: GrafF812 26.8.2010, 22:15

Amphiluke, спасибо Вам большое, пример очень хороший. Подскажите пожалуйста вот что, когда мышкой хватаешь за границу и перетаскиваешь, то изменение ширины происходит моментально. А можно ли сделать как в Word, т.е ширина столбца меняется тогда, когда уже кнопку мыши отпускаешь?

Автор: Amphiluke 26.8.2010, 22:29

Наверное, примерно так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    td {
        border-right: 4px ridge #339966;
    }
</style>
<script type="text/javascript">
    var inDrag = false;
    var tdDrag = null;
    var newWidth;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function downHandler(e) {
        if (!e) e = event;
        var sender = (e.target) ? e.target : e.srcElement;
        if (sender.nodeName.toLowerCase() != "td") return true;
        var left = getTruthPos(sender);
        var width = sender.offsetWidth;
        inDrag = ((Math.abs(e.clientX - left) < 10) || (Math.abs(e.clientX - left - width) < 10));
        if (inDrag) {
            tdDrag = sender;
            newWidth = width;
        }
    }
    function upHandler(e) {
        if (inDrag)
            tdDrag.style.width = newWidth.toString() + "px";
        inDrag = false;
        tdDrag = null;
    }
    function moveHandler(e) {
        if (!e) e = event;
        if (!inDrag) return true;
        var left = getTruthPos(tdDrag);
        var width = tdDrag.offsetWidth;
        newWidth = e.clientX - left;
        if (newWidth < 0)
            newWidth = width;
    }
    function cursorHandler(e) {
        var tb = document.getElementById("resizeTbl");
        if (!e) e = event;
        var sender = (e.target) ? e.target : e.srcElement;
        if (sender.nodeName.toLowerCase() != "td") return true;
        var left = getTruthPos(sender);
        var width = sender.offsetWidth;
        if ((Math.abs(e.clientX - left) < 10) || (Math.abs(e.clientX - left - width) < 10) || inDrag) {
            tb.style.cursor = "e-resize";
        } else {
            tb.style.cursor = "default";
        }
    }
    function setResizeHandlers(e) {
        var tb = document.getElementById("resizeTbl");
        registerHandler(document, "mousedown", downHandler);
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "mousemove", cursorHandler);
    }
    
    
    registerHandler(window, "load", setResizeHandlers);
</script>
</head>

<body>
    <table border="2" rules="all" id="resizeTbl">
        <tr>
            <td>_____1.1_____</td>
            <td>_____1.2_____</td>
            <td>_____1.3_____</td>
            <td>_____1.4_____</td>
            <td>_____1.5_____</td>
        </tr>
        <tr>
            <td>_____2.1_____</td>
            <td>_____2.2_____</td>
            <td>_____2.3_____</td>
            <td>_____2.4_____</td>
            <td>_____2.5_____</td>
        </tr>
        <tr>
            <td>_____3.1_____</td>
            <td>_____3.2_____</td>
            <td>_____3.3_____</td>
            <td>_____3.4_____</td>
            <td>_____3.5_____</td>
        </tr>
    </table>
</body>
</html>

Автор: GrafF812 26.8.2010, 22:41

Amphiluke, да мне нужно так. Вы просто умница smile

Однако я заметил что растяжка почему-то происходит не с первого раза. Поэтому я и решил использовать дополнительные вертикальные Div-вы. Посмотрите пожалуйста этот html код, я его специально изменил под Ваш пример, вставив туда 4 Div-ва за которые как раз и нужно хвататься чтобы растягивать. Может не так трудно будет перетаскивать.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    td {
        border-right: 1px ridge #339966;
    }
     div.cDrag div {
        background: repeat scroll 0 0 transparent;
        cursor:col-resize;
        display:block;
        float:left;
        height:24px;
        position:absolute;
        width:5px;
        border: 1px solid rgb(0,0,0);
</style>

</head>
<body>
    <div style="left:100px; top:100px;">
     <div class="cDrag" style="top: 27px;">
        <div style="height: 70px; left: 109px;"></div>
        <div style="height: 70px; left: 212px;"></div>
        <div style="height: 70px; left: 315px;"></div>
         <div style="height: 70px; left: 418px;"></div>
    </div>
    <table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;">
        <tr>
            <td>_____1.1_____</td>
            <td>_____1.2_____</td>
            <td>_____1.3_____</td>
            <td>_____1.4_____</td>
            <td>_____1.5_____</td>
        </tr>
        <tr>
            <td>_____2.1_____</td>
            <td>_____2.2_____</td>
            <td>_____2.3_____</td>
            <td>_____2.4_____</td>
            <td>_____2.5_____</td>
        </tr>
        <tr>
            <td>_____3.1_____</td>
            <td>_____3.2_____</td>
            <td>_____3.3_____</td>
            <td>_____3.4_____</td>
            <td>_____3.5_____</td>
        </tr>
    </table>
    </div>
</body>
</html>

Помогите пожалуйста сделать перетаскивание именно с помощью Div-ов. Вы очень класно все придумали.

Автор: Amphiluke 26.8.2010, 22:43

Правда, при таком resize начинает выделяться текст вслед за указателем мыши. В принципе это можно попробовать предотвратить, если на время перетаскивания накрыть таблицу прозрачным слоем с большим z-index. smile

Добавлено через 1 минуту и 11 секунд
Ой, не увидел вашего предыдущего сообщения.

Автор: GrafF812 26.8.2010, 22:45

Amphiluke, я очень Вас прошу покажите пожалуйста smile

Автор: Amphiluke 26.8.2010, 22:53

Ну, подождите… Это же несколько по-другому придется реализовывать.

Автор: GrafF812 26.8.2010, 22:59

Автор: Amphiluke 26.8.2010, 23:31

Вот пробный вариант. Еще можно посмотреть, доработать…

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
     div.cDrag div {
        background: repeat scroll 0 0 transparent;
        cursor:col-resize;
        display:block;
        height:24px;
        position:absolute;
        width:5px;
        border: 1px dotted #000000;
}
</style>
<script type="text/javascript">
    var inDrag = false;
    var splitter = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth).toString() + "px";
        }
    }
    function downHandler(e) {
        inDrag = true;
        splitter = (e.target) ? e.target : e.srcElement;
    }
    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var td = document.getElementById("resizeTbl").rows[0].cells[tdNo];
        var tdLeft = getTruthPos(td);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            td.style.width = newWidth.toString() + "px";
        }
        moveSplitters();
    }
    function moveHandler(e) {
        if (!inDrag) return true;
        splitter.style.left = (e.clientX - 2).toString() + "px";
    }
    function setResizeHandlers(e) {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            registerHandler(divs[i], "mousedown", downHandler);
            registerHandler(document, "mouseup", upHandler);
            registerHandler(document, "mousemove", moveHandler);
        }
        moveSplitters();
    }
    
    
    registerHandler(window, "load", setResizeHandlers);
</script>
</head>

<body>
     <div class="cDrag" style="top: 27px;" id="splitters">
        <div style="height: 70px; left: 109px;" id="_0"></div>
        <div style="height: 70px; left: 212px;" id="_1"></div>
        <div style="height: 70px; left: 315px;" id="_2"></div>
         <div style="height: 70px; left: 418px;" id="_3"></div>
    </div>
    <table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;">
        <tr>
            <td>_____1.1_____</td>
            <td>_____1.2_____</td>
            <td>_____1.3_____</td>
            <td>_____1.4_____</td>
            <td>_____1.5_____</td>
        </tr>
        <tr>
            <td>_____2.1_____</td>
            <td>_____2.2_____</td>
            <td>_____2.3_____</td>
            <td>_____2.4_____</td>
            <td>_____2.5_____</td>
        </tr>
        <tr>
            <td>_____3.1_____</td>
            <td>_____3.2_____</td>
            <td>_____3.3_____</td>
            <td>_____3.4_____</td>
            <td>_____3.5_____</td>
        </tr>
    </table>
</body>
</html>

Автор: GrafF812 26.8.2010, 23:42

Amphiluke, вот это супер, только вот еще бы кое что сделать. Почему-то перетаскивать с первого раза опять не получается, вроде навожу мышкой зажимаю левой кнопкой мыши, а она то не двигается, то когда кнопку мыши отпускаю и она все равно продолжает перемещаться. Можно ли как-то это исправить?

P.S: я заметил, что каждое второе перемещение приводит к такой ситуации.

Автор: Amphiluke 26.8.2010, 23:44

В каком браузере?

Добавлено через 4 минуты и 5 секунд
Блииииин! Какую фигню сделал... smile

Цитата(Amphiluke @ 27.8.2010, 03:31

)

for (var i = 0; i < divs.length; i++) {
    registerHandler(divs[i], "mousedown", downHandler);
    registerHandler(document, "mouseup", upHandler);
    registerHandler(document, "mousemove", moveHandler);
}

Надо так:

Код


registerHandler(document, "mouseup", upHandler);
registerHandler(document, "mousemove", moveHandler);
for (var i = 0; i < divs.length; i++) {
    registerHandler(divs[i], "mousedown", downHandler);
}

Но это между прочим.

Автор: GrafF812 26.8.2010, 23:54

Amphiluke,
в FF, в IE если ближе к левой границе хвататься, то все нормально, а если ближе к правой, то происходит такая ситуация. В GoogleChrome и Opera все идеально работает.

т.е только в IE частично не работает и в FF всегда второй раз плохо перетаскивается.

Добавлено через 4 минуты и 49 секунд
GrafF812, после этого в IE заработало, а в FF по прежнему также

Добавлено через 6 минут и 39 секунд
Знаете что я заметил, в IE схватить за границу можно только у самых ее краев, слева и справа. По центру дива, курсор почему-то не меняется на col-resize.

Добавлено через 7 минут и 37 секунд

Цитата(GrafF812 @ 26.8.2010, 23:54

)

после этого в IE заработало

прошу прощения, все также осталось

Автор: Amphiluke 27.8.2010, 00:12

Цитата(GrafF812 @ 27.8.2010, 03:54

)

Знаете что я заметил, в IE схватить за границу можно только у самых ее краев, слева и справа. По центру дива, курсор почему-то не меняется на col-resize.

Поставьте фон splitter'ам какой-нибудь, кроме transparent.

В общем, хватит пока. Четыре часа ночи (утра?). Потом (днем) еще попробую поразбираться, уж не обессудьте. -_-

Автор: GrafF812 27.8.2010, 00:18

Amphiluke, спасибо Вам большое Вы мне очень сильно помогли.

Автор: Amphiluke 27.8.2010, 08:55

Оказывается, по-видимому, что таскание сплиттеров получалось не с первого раза из-за того, что событие mousemove сменялось в FF и IE событием drag! В Opera такое событие, кажется, не поддерживается, поэтому там работало нормально.

В общем, вот последний на текущий момент наиболее стабильный вариант со сплиттерами

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
     div.cDrag div {
        /*background: repeat scroll 0 0 transparent;*/
        background: red;
        cursor:col-resize;
        display:block;
        height:24px;
        position:absolute;
        width:5px;
        border: 1px dotted #000000;
}
</style>
<script type="text/javascript">
    var inDrag = false;
    var splitter = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth).toString() + "px";
        }
    }
    function downHandler(e) {
        if (inDrag) return true;
        inDrag = true;
        splitter = (e.target) ? e.target : e.srcElement;
    }
    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var td = document.getElementById("resizeTbl").rows[0].cells[tdNo];
        var tdLeft = getTruthPos(td);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            td.style.width = newWidth.toString() + "px";
        }
        moveSplitters();
    }
    function moveHandler(e) {
        if (!inDrag) return true;
        if (!e) e = event;
        if (e.clientX > 2)
            splitter.style.left = (e.clientX - 2).toString() + "px";
    }
    function setResizeHandlers(e) {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "dragend", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "drag", moveHandler);
        registerHandler(document, "dragover", moveHandler);
        for (var i = 0; i < divs.length; i++) {
            registerHandler(divs[i], "mousedown", downHandler);
        }
        moveSplitters();
    }
    
    
    registerHandler(window, "load", setResizeHandlers);
</script>
</head>

<body>
     <div class="cDrag" style="top: 27px;" id="splitters">
        <div style="height: 70px; left: 109px;" id="_0"></div>
        <div style="height: 70px; left: 212px;" id="_1"></div>
        <div style="height: 70px; left: 315px;" id="_2"></div>
         <div style="height: 70px; left: 418px;" id="_3"></div>
    </div>
    <table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;">
        <tr>
            <td>_____1.1_____</td>
            <td>_____1.2_____</td>
            <td>_____1.3_____</td>
            <td>_____1.4_____</td>
            <td>_____1.5_____</td>
        </tr>
        <tr>
            <td>_____2.1_____</td>
            <td>_____2.2_____</td>
            <td>_____2.3_____</td>
            <td>_____2.4_____</td>
            <td>_____2.5_____</td>
        </tr>
        <tr>
            <td>_____3.1_____</td>
            <td>_____3.2_____</td>
            <td>_____3.3_____</td>
            <td>_____3.4_____</td>
            <td>_____3.5_____</td>
        </tr>
    </table>
    <p id="test"></p>
</body>
</html>

Автор: GrafF812 27.8.2010, 11:32

Amphiluke, Вы просто умничка спасибо Вам огромное. еще если Вам не трудно, подскажите как сделать так, чтобы ширина самой таблицы оставалась фиксированной (например 700 px), а при изменении ширины столбцов, эта дельта изменения ширины столбца всегда изменяла последний столбец. И можно ли так сделать чтобы при изменении ширины столбца - текст ячейки переносился ниже строчкой (в этой же ячейки)?

Добавлено через 5 минут и 14 секунд
Amphiluke, до Вас доходят мои приватные сообщения?

Автор: GrafF812 27.8.2010, 11:50

Цитата(GrafF812 @ 27.8.2010, 11:32

)

эта дельта изменения ширины столбца всегда изменяла последний столбец

т. е таким образом я хочу добиться того, чтобы остальные столбцы не меняли свою ширину - только последний. Если так можно?

Автор: Amphiluke 27.8.2010, 11:52

Цитата(GrafF812 @ 27.8.2010, 15:32

)

при изменении ширины столбцов, эта дельта изменения ширины столбца всегда изменяла последний столбец.

Не понял. Какая дельта? Что получается, мы изменяем ширину, допустим, первого столбца, а в результате меняется ширина последнего?

Цитата(GrafF812 @ 27.8.2010, 15:32

)

И можно ли так сделать чтобы при изменении ширины столбца - текст ячейки переносился ниже строчкой (в этой же ячейки)?

Для этого в содержимом текста ячеек должны быть пробелы, по которым можно будет сделать перенос.

Добавлено @ 11:58

Цитата(GrafF812 @ 27.8.2010, 15:50

)

И как это можно у таблицы фиксированной ширины изменять ширину последнего столбца, не меняя ширину других?

Автор: GrafF812 27.8.2010, 12:01

Цитата(Amphiluke @ 27.8.2010, 11:52

)

Что получается, мы изменяем ширину, допустим, первого столбца, а в результате меняется ширина последнего

Почти, смотрите когда мы меняет размер первого столбца, он меняет свою ширину. Но поскольку таблица должна быть фиксированной ширины (700-800 px), то ширина второго столбца станет меньше или больше (за счет изменения ширины первого). А мне нужно, чтобы ширина второго и соответственно других столбцов не менялась. Менялась бы ширина только последнего столбца на эту дельту ширины изменения первого столбца. Надеюсь понятно объяснил smile

Автор: Amphiluke 27.8.2010, 12:22

Вот заменить обработчик upHandler.

Код


function upHandler(e) {
    if (!inDrag) return true;
    inDrag = false;
    var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
    var tds = document.getElementById("resizeTbl").rows[0].cells;
    var widths = new Array();
    for (var i = 0; i < tds.length - 1; i++) {
        widths.push(tds[i].offsetWidth);
    }
    var tdLeft = getTruthPos(tds[tdNo]);
    var newWidth = getTruthPos(splitter) - tdLeft;
    if (newWidth > 0) {
        for (var i = 0; i < tds.length - 1; i++) {
            tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString() + "px";
        }
    }
    moveSplitters();
}

Добавлено через 46 секунд
И, разумеется, ширину табличке дать

Код


<table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;" width="700">

Автор: GrafF812 27.8.2010, 12:38

Amphiluke, да это именно то что мне нужно, только Вот знаете что я заметил, например если изменять ширину первого столбца, то все нормально, а если изменять ширину других столбцов, то при отпускании все предыдущие Div-ы перемещаются на небольшое расстояние 1-2 px, мне нужно чтобы они стояли не двигаясь. Вот попробуйте например потянуть за второй Div и перенести его скажем немного впрапво, после отпуская мыши первый див также сместиться немного вправо, таким образом ширина первой ячейки немного изменяется, а нужно чтобы он не менялся. smile

Автор: Amphiluke 27.8.2010, 13:08

Ну так и вычесть эти два пикселя при позиционировании.

Код


divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth - 2).toString() + "px";

Вот, привожу состояние сценария на текущий момент. smile

Код


    var inDrag = false;
    var splitter = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth - 2).toString() + "px";
        }
    }
    function downHandler(e) {
        if (inDrag) return true;
        inDrag = true;
        splitter = (e.target) ? e.target : e.srcElement;
    }
    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        var widths = new Array();
        for (var i = 0; i < tds.length - 1; i++) {
            widths.push(tds[i].offsetWidth);
        }
        var tdLeft = getTruthPos(tds[tdNo]);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < tds.length - 1; i++) {
                tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString() + "px";
            }
        }
        moveSplitters();
    }
    function moveHandler(e) {
        if (!inDrag) return true;
        if (!e) e = event;
        if (e.clientX > 2)
            splitter.style.left = (e.clientX - 2).toString() + "px";
    }
    function setResizeHandlers(e) {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "dragend", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "drag", moveHandler);
        registerHandler(document, "dragover", moveHandler);
        for (var i = 0; i < divs.length; i++) {
            registerHandler(divs[i], "mousedown", downHandler);
        }
        moveSplitters();
    }
    
    
    registerHandler(window, "load", setResizeHandlers);

Автор: GrafF812 27.8.2010, 13:12

Amphiluke, Вы знаете, все равно если перемещать 2, 3 или 4 DIV не важно вправо или влево, то первый DIV все равно смещается вправо smile

Автор: Amphiluke 27.8.2010, 13:34

Да это сама ячейка чуть-чуть расширяется, а div уже подстраиваеися под нее.

Короче, вот радикальный метод. smile

Код


    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        var widths = new Array();
        for (var i = 0; i < tds.length - 1; i++) {
            if (tds[i].currentStyle) {
                widths.push(tds[i].currentStyle.width);
            } else {
                widths.push(getComputedStyle(tds[i], null).width);
            }
        }
        var tdLeft = getTruthPos(tds[tdNo]);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < tds.length - 1; i++) {
                tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString();
            }
        }
        moveSplitters();
    }

Добавлено через 1 минуту и 28 секунд
Блин, проверил только в FF. В остальных, похоже, не катит. smile

Добавлено через 3 минуты и 12 секунд
Если бы таблица не пыталась сама подстроить размеры после каждого программного изменения ширины ячейки, было бы легче.

Добавлено через 6 минут и 11 секунд
FF возвращает вычисляемый стиль width нормально, в пикселях, а остальные — auto. Ррр.

Автор: GrafF812 27.8.2010, 13:45

Amphiluke, а это как-то можно поправить?

Добавлено через 1 минуту и 43 секунды
Amphiluke, а может поставить для таблицы какой-нибудь fixed стиль, если такой имеется?

Добавлено через 5 минут и 9 секунд
GrafF812, Вы знаете я для таблицы поставил стиль table-layout: fixed вроде теперь нормально, посмотрите пожалуйста как у Вас?

Добавлено через 7 минут и 27 секунд

Цитата(GrafF812 @ 27.8.2010, 13:45

)

Вы знаете я для таблицы поставил стиль table-layout: fixed

Только есть одна особенность: в IE и наверное других все работает нормально, только при условии что Вы хотя бы один раз переместили первый DIV, в противном случае не работает.)))) В чем интересно дело?

Добавлено через 10 минут и 55 секунд

Цитата(GrafF812 @ 27.8.2010, 13:45

)

Только есть одна особенность: в IE и наверное других все работает нормально, только при условии что Вы хотя бы один раз переместили первый DIV

Новое наблюдение, нужно переместить первый и последний, тогда все работает.

Добавлено через 14 минут и 49 секунд

Цитата(GrafF812 @ 27.8.2010, 13:45

)

Новое наблюдение, нужно переместить первый и последний, тогда все работает.

Ну в общем если все DIV-вы передергать тогда все точно работает. А может быть нужно ячейкам присваивать фиксированные размеры, а то видимо браузер их понимает после инициализации, когда мы перемещаем Div-ы. Попробуйте пожалуйста эту идею smile

Автор: Amphiluke 27.8.2010, 14:00

Методом бездумной подгонки можно подобрать значение поправки, чтобы работало как надо…

Код


    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        var widths = new Array();
        for (var i = 0; i < tds.length - 1; i++) {
            widths.push(tds[i].clientWidth - 2);
        }
        var tdLeft = getTruthPos(tds[tdNo]);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < tds.length - 1; i++) {
                tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString() + "px";
            }
        }
        moveSplitters();
    }

Без table-layout:fixed

Добавлено через 1 минуту и 10 секунд
smile

Автор: GrafF812 27.8.2010, 14:05

Цитата(Amphiluke @ 27.8.2010, 14:00

)

Методом бездумной подгонки можно подобрать значение поправки, чтобы работало как надо…

Прошу прощения, а универсальным средством можно решить эту проблему? Начальная ширина ячеек не подойдет?

Автор: Amphiluke 27.8.2010, 14:12

Цитата(GrafF812 @ 27.8.2010, 18:05

)

а универсальным средством можно решить эту проблему?

Это вы разрешения спрашиваете? Можно. Разрешаю. smile

Цитата(GrafF812 @ 27.8.2010, 18:05

)

Начальная ширина ячеек не подойдет?

Что это значит?

Все атрибуты типа offsetWidth, clientWidth дают ширину ячейки, варьирующую относительно CSS атрибута width на 1—2px. Хз, как еще извратиться, чтобы обойтись без подгоночной поправки.

Добавлено через 2 минуты и 46 секунд
Хотел сделать через вычисляемый стиль, а везде, кроме FF выходит width: auto

Автор: GrafF812 27.8.2010, 14:19

Amphiluke, Но ведь когда подергать за все DIV-ы почему-то начинает работать smile

Цитата(Amphiluke @ 27.8.2010, 14:12

)

Начальная ширина ячеек не подойдет?

Что это значит?

Я имею в виду что при создании таблицы задавать ширину каждой ячейки в px.

Автор: Amphiluke 27.8.2010, 14:29

Вы правы.

Код


    var inDrag = false;
    var splitter = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth - 2).toString() + "px";
        }
    }
    function downHandler(e) {
        if (inDrag) return true;
        inDrag = true;
        splitter = (e.target) ? e.target : e.srcElement;
    }
    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        var widths = new Array();
        for (var i = 0; i < tds.length - 1; i++) {
            if (tds[i].currentStyle) {
                widths.push(tds[i].currentStyle.width);
            } else {
                widths.push(getComputedStyle(tds[i], null).width);
            }
        }
        var tdLeft = getTruthPos(tds[tdNo]);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < tds.length - 1; i++) {
                tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString();
            }
        }
        moveSplitters();
    }
    function moveHandler(e) {
        if (!inDrag) return true;
        if (!e) e = event;
        if (e.clientX > 2)
            splitter.style.left = (e.clientX - 2).toString() + "px";
    }
    function setResizeHandlers(e) {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "dragend", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "drag", moveHandler);
        registerHandler(document, "dragover", moveHandler);
        for (var i = 0; i < divs.length; i++) {
            registerHandler(divs[i], "mousedown", downHandler);
        }
        
        var tb = document.getElementById("resizeTbl");
        var tds = tb.rows[0].cells;
        var width = Math.round(tb.offsetWidth / tds.length).toString() + "px";
        for (var i = 0; i < tds.length - 1; i++) {
            tds[i].style.width = width;
        }
        
        moveSplitters();
    }
    
    
    registerHandler(window, "load", setResizeHandlers);

Добавлено через 4 минуты и 36 секунд
Это без table-layout.

Автор: GrafF812 27.8.2010, 14:37

Amphiluke, Ур-а-а-а-а-а. Все просто СУПЕР, огромнейшее Вам спасибо. smile

Извините, позвольте мне задать последний к Вам вопрос, смотрите Вы реализовали перетаскивание с помощью DIV-ов, (красного цвета). Можно ли сделать так, чтобы они были не видимыми, а в момент захвата мышкой появлялась тоненькая черная линия и вместе с перемещением мышки двигалась. Ну как в Word-e.

Автор: Amphiluke 27.8.2010, 14:44

Вот. Выложу всё в одном месте, вдруг кому еще понадобится результат наших с вами изысканий. smile

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    div.cDrag div {
        background: none;
        cursor:col-resize;
        display:block;
        height:24px;
        position:absolute;
        width:5px;
        border: 0px dotted #000000;
    }
</style>
<script type="text/javascript">
    var inDrag = false;
    var splitter = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth - 2).toString() + "px";
        }
    }
    function downHandler(e) {
        if (inDrag) return true;
        inDrag = true;
        splitter = (e.target) ? e.target : e.srcElement;
        splitter.style.borderWidth = "1px";
    }
    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        var widths = new Array();
        for (var i = 0; i < tds.length - 1; i++) {
            if (tds[i].currentStyle) {
                widths.push(tds[i].currentStyle.width);
            } else {
                widths.push(getComputedStyle(tds[i], null).width);
            }
        }
        var tdLeft = getTruthPos(tds[tdNo]);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < tds.length - 1; i++) {
                tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString();
            }
        }
        moveSplitters();
        splitter.style.borderWidth = "0px";
    }
    function moveHandler(e) {
        if (!inDrag) return true;
        if (!e) e = event;
        if (e.clientX > 2)
            splitter.style.left = (e.clientX - 2).toString() + "px";
    }
    function setResizeHandlers(e) {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "dragend", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "drag", moveHandler);
        registerHandler(document, "dragover", moveHandler);
        for (var i = 0; i < divs.length; i++) {
            registerHandler(divs[i], "mousedown", downHandler);
        }
        
        var tb = document.getElementById("resizeTbl");
        var tds = tb.rows[0].cells;
        var width = Math.round(tb.offsetWidth / tds.length).toString() + "px";
        for (var i = 0; i < tds.length - 1; i++) {
            tds[i].style.width = width;
        }
        
        moveSplitters();
    }
    
    
    registerHandler(window, "load", setResizeHandlers);
</script>
</head>

<body>
     <div class="cDrag" style="top: 27px;" id="splitters">
        <div style="height: 70px; left: 109px;" id="_0"></div>
        <div style="height: 70px; left: 212px;" id="_1"></div>
        <div style="height: 70px; left: 315px;" id="_2"></div>
         <div style="height: 70px; left: 418px;" id="_3"></div>
    </div>
    <table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;" width="700">
        <tr>
            <td>_____ 1.1_____</td>
            <td>_____ 1.2_____</td>
            <td>_____ 1.3_____</td>
            <td>_____ 1.4_____</td>
            <td>_____ 1.5_____</td>
        </tr>
        <tr>
            <td>_____ 2.1_____</td>
            <td>_____ 2.2_____</td>
            <td>_____ 2.3_____</td>
            <td>_____ 2.4_____</td>
            <td>_____ 2.5_____</td>
        </tr>
        <tr>
            <td>_____ 3.1_____</td>
            <td>_____ 3.2_____</td>
            <td>_____ 3.3_____</td>
            <td>_____ 3.4_____</td>
            <td>_____ 3.5_____</td>
        </tr>
    </table>
</body>
</html>

Добавлено @ 14:49
Возможно, вместо background: none для div'ов стоит сделать повторяющийся background из прозрачного GIF-изображения 1x1 px.

Автор: GrafF812 27.8.2010, 14:51

Amphiluke, Ур-а-а-а-а-а. Все просто СУПЕР, огромнейшее Вам спасибо. smile

Автор: Amphiluke 27.8.2010, 14:55

Я сделал, чтобы появлялась точечная рамка вокруг div'ов. Вы же, если хотите, можете вместо этого устанавливать перетаскиваемому div'у специальный background с изображением черной линии, а при отпускании мыши вновь устанавливать background: none.

Автор: GrafF812 27.8.2010, 15:32

Amphiluke, Я Вас очень прошу покажите пожалуйста, у меня почему-то не получается DIV разместить ровно по середине границе самой таблицы.

Автор: Amphiluke 27.8.2010, 15:48

А зачем вам сверхвысокая точность? Все равно область захвата границы должна быть достаточно широкой.
Попробуйте, увеличьте смещение

Код


    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth - 3).toString() + "px";
        }
    }

Добавлено через 1 минуту и 55 секунд
Либо при старом смещении возьмите clientWidth вместо offsetWidth

Автор: GrafF812 27.8.2010, 16:48

Amphiluke, о-о-о смещение, это мне и нужно было. Да кстати забыл спросить, когда хватаем за DIV, то его можно тянуть куда угодно, а можно ли сделать ограничение в пределах двух ячеек, между которых захватываемый DIV, вот на рисунке примерно нарисовал.
http://ipicture.ru/Gallery/Viewfull/987376.html
т.е чтобы перемещать границу DIV можно было бы не дальше этих границ.

Автор: Amphiluke 27.8.2010, 18:10

Сценарий разрастается (как и ваши аппетиты) smile

, поэтому приходится весьма существенно модифицировать с целью оптимизации и быстродействия

Код


    var colSizer = {
        inDrag: false,
        splitter: null,
        splitters: [],
        cells: []
    }
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        for (var i = 0; i < colSizer.splitters.length; i++) {
            colSizer.splitters[i].style.left = (getTruthPos(colSizer.cells[i]) + colSizer.cells[i].clientWidth - 2).toString() + "px";
        }
    }
    function downHandler(e) {
        if (colSizer.inDrag) return true;
        colSizer.inDrag = true;
        colSizer.splitter = (e.target) ? e.target : e.srcElement;
        colSizer.splitter.style.borderWidth = "1px";
    }
    function upHandler(e) {
        if (!colSizer.inDrag) return true;
        colSizer.inDrag = false;
        var tdNo = parseInt(colSizer.splitter.id.match(/_(\d+)/)[1]);
        var widths = new Array();
        if (colSizer.cells[0].currentStyle) {
            for (var i = 0; i < colSizer.cells.length - 1; i++) {
                widths.push(colSizer.cells[i].currentStyle.width);
            }
        } else {
            for (var i = 0; i < colSizer.cells.length - 1; i++) {
                widths.push(getComputedStyle(colSizer.cells[i], null).width);
            }
        }
        var tdLeft = getTruthPos(colSizer.cells[tdNo]);
        var newWidth = getTruthPos(colSizer.splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < colSizer.cells.length - 1; i++) {
                colSizer.cells[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString();
            }
        }
        moveSplitters();
        colSizer.splitter.style.borderWidth = "0px";
    }
    function moveHandler(e) {
        if (!colSizer.inDrag) return true;
        var tdNo = parseInt(colSizer.splitter.id.match(/_(\d+)/)[1]);
        var leftLim = (tdNo > 0) ? getTruthPos(colSizer.splitters[tdNo - 1]) : 2;
        var rightLim = (tdNo < colSizer.splitters.length - 1) ? getTruthPos(colSizer.splitters[tdNo + 1]) : 100000;
        if (!e) e = event;
        if ((e.clientX > leftLim) && (e.clientX < rightLim)) {
            colSizer.splitter.style.left = (e.clientX - 2).toString() + "px";
        }
    }
    function setResizeHandlers(e) {
        colSizer.splitters = document.getElementById("splitters").getElementsByTagName("div");
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "dragend", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "drag", moveHandler);
        registerHandler(document, "dragover", moveHandler);
        for (var i = 0; i < colSizer.splitters.length; i++) {
            registerHandler(colSizer.splitters[i], "mousedown", downHandler);
        }
        
        var tb = document.getElementById("resizeTbl");
        colSizer.cells = tb.rows[0].cells;
        var width = Math.round(tb.offsetWidth / colSizer.cells.length).toString() + "px";
        for (var i = 0; i < colSizer.cells.length - 1; i++) {
            colSizer.cells[i].style.width = width;
        }
        
        moveSplitters();
    }
    
    registerHandler(window, "load", setResizeHandlers);

Добавлено через 2 минуты и 32 секунды
Давайте уже сами начинайте подстраивать код под свои нужды.

Автор: GrafF812 27.8.2010, 18:15

Amphiluke, супер, только я хотел чтобы при перемещении DIV останавливался за 10px до границе, а здесь он останавливается ровно на линии, извините если очень достаю Вам, но Вы просто все потрясающе делаете smile

Добавлено через 1 минуту и 58 секунд
GrafF812, а можно ли сделать чтобы к левой и правой границе таблице также за 10 px нельзя было переместить?

Автор: Amphiluke 27.8.2010, 18:21

Ага. Так и пишите: «не хочу сам разбираться!». Тут буквально в двух местах подставить эти слагаемые в 10px. Вы не собираетесь вникать в код, который здесь для вас уж три страницы крутится? smile

Автор: GrafF812 27.8.2010, 18:22

GrafF812, а можно ли сделать чтобы к левой и правой границе таблице также за 10 px нельзя было переместить?

Добавлено через 4 минуты и 15 секунд

Цитата(Amphiluke @ 27.8.2010, 18:21

)

Ага. Так и пишите: «не хочу сам разбираться!». Тут буквально в двух местах подставить эти слагаемые в 10px.

я просто плохо владею JS и хочу по Вашему примерчику разобраться как делать дальше самостоятельно, подскажите пожалуйста в какой функции Вы подставляете расстояние до DIV-ов, тут еще вот в чем дело, у Вас рассчитывается расстояние только до DIV-ов, а нужно еще учитывать границы самой таблицы. Сделайте пожалуйста, Вы мне очень помогли я Вам безумно благодарен, больше беспокоить не буду smile

Автор: Amphiluke 27.8.2010, 18:33

Вот здесь эти 10px.

Код


function moveHandler(e) {
    if (!colSizer.inDrag) return true;
    var tb = document.getElementById("resizeTbl");
    var tdNo = parseInt(colSizer.splitter.id.match(/_(\d+)/)[1]);
    var leftLim = (tdNo > 0) ? getTruthPos(colSizer.splitters[tdNo - 1]) + 10 : getTruthPos(tb) + 10;
    var rightLim = (tdNo < colSizer.splitters.length - 1) ? getTruthPos(colSizer.splitters[tdNo + 1]) - 10 : getTruthPos(tb) + tb.offsetWidth - 10;
    if (!e) e = event;
    if ((e.clientX > leftLim) && (e.clientX < rightLim)) {
        colSizer.splitter.style.left = (e.clientX - 2).toString() + "px";
    }
}

Добавлено через 1 минуту и 33 секунды
leftLim и rightLim соответственно левая и правая границы, за которые нельзя утащить сплиттер.

Автор: GrafF812 27.8.2010, 18:39

Цитата(Amphiluke @ 27.8.2010, 18:21

)

Ага. Так и пишите: «не хочу сам разбираться!». Тут буквально в двух местах подставить эти слагаемые в 10px.

Автор: Amphiluke 27.8.2010, 18:44

У меня почему-то ваши сообщения двоятся… smile

Что бы это значило?
Код я вам дал. Работает?

Автор: GrafF812 27.8.2010, 18:49

Amphiluke, Спасибо Вам большое за все, Вам +1000000000