Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Помогите с resize-ом столбцов таблыцы 
:(
    Опции темы
GrafF812
Дата 26.8.2010, 19:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Здравствуйте. У есть вот такая таблица
Код

<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-ы съезжают вправо, в остальных браузерах все ровно.
PM MAIL   Вверх
Amphiluke
Дата 26.8.2010, 21:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Хм, интересная задачка…  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 секунд
Как-то туговато, правда, тягается, если растянуть таблицу на всю ширину окна.
PM   Вверх
dеluxe
Дата 26.8.2010, 21:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 48
Регистрация: 4.8.2009

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



Это сообщение отредактировал(а) dеluxe - 26.8.2010, 21:45
PM MAIL   Вверх
GrafF812
Дата 26.8.2010, 22:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, спасибо Вам большое, пример очень хороший. Подскажите пожалуйста вот что, когда мышкой хватаешь за границу и перетаскиваешь, то изменение ширины происходит моментально. А можно ли сделать как в Word, т.е ширина столбца меняется тогда, когда уже кнопку мыши отпускаешь?
PM MAIL   Вверх
Amphiluke
Дата 26.8.2010, 22:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Наверное, примерно так:
Код

<!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>
PM   Вверх
GrafF812
Дата 26.8.2010, 22:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
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-ов. Вы очень класно все придумали.
PM MAIL   Вверх
Amphiluke
Дата 26.8.2010, 22:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

Добавлено через 1 минуту и 11 секунд
Ой, не увидел вашего предыдущего сообщения.
PM   Вверх
GrafF812
Дата 26.8.2010, 22:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, я очень Вас прошу покажите пожалуйста smile 
PM MAIL   Вверх
Amphiluke
Дата 26.8.2010, 22:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Ну, подождите… Это же несколько по-другому придется реализовывать.
PM   Вверх
GrafF812
Дата 26.8.2010, 22:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
 smile 
PM MAIL   Вверх
Amphiluke
Дата 26.8.2010, 23:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Вот пробный вариант. Еще можно посмотреть, доработать…
Код

<!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>
PM   Вверх
GrafF812
Дата 26.8.2010, 23:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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

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

Это сообщение отредактировал(а) GrafF812 - 26.8.2010, 23:44
PM MAIL   Вверх
Amphiluke
Дата 26.8.2010, 23:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
В каком браузере?

Добавлено через 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);
}


Но это между прочим.
PM   Вверх
GrafF812
Дата 26.8.2010, 23:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
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 заработало

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

Это сообщение отредактировал(а) GrafF812 - 26.8.2010, 23:55
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 00:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Цитата(GrafF812 @  27.8.2010,  03:54 Найти цитируемый пост)
Знаете что я заметил, в IE схватить за границу можно только у самых ее краев, слева и справа. По центру дива, курсор почему-то не меняется на col-resize.

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

В общем, хватит пока. Четыре часа ночи (утра?). Потом (днем) еще попробую поразбираться, уж не обессудьте. -_-
PM   Вверх
GrafF812
Дата 27.8.2010, 00:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, спасибо Вам большое Вы мне очень сильно помогли.
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 08:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Оказывается, по-видимому, что таскание сплиттеров получалось не с первого раза из-за того, что событие 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>



Это сообщение отредактировал(а) Amphiluke - 27.8.2010, 09:24
PM   Вверх
GrafF812
Дата 27.8.2010, 11:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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

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

Это сообщение отредактировал(а) GrafF812 - 27.8.2010, 11:33
PM MAIL   Вверх
GrafF812
Дата 27.8.2010, 11:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Цитата(GrafF812 @  27.8.2010,  11:32 Найти цитируемый пост)
эта дельта изменения ширины столбца всегда изменяла последний столбец

т. е таким образом я хочу добиться того, чтобы остальные столбцы не меняли свою ширину - только последний. Если так можно?
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 11:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Цитата(GrafF812 @  27.8.2010,  15:32 Найти цитируемый пост)
при изменении ширины столбцов, эта дельта изменения ширины столбца всегда изменяла последний столбец.

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


Цитата(GrafF812 @  27.8.2010,  15:32 Найти цитируемый пост)
И можно ли так сделать чтобы при изменении ширины столбца - текст ячейки переносился ниже строчкой (в этой же ячейки)?

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

Добавлено @ 11:58
Цитата(GrafF812 @  27.8.2010,  15:50 Найти цитируемый пост)
т. е таким образом я хочу добиться того, чтобы остальные столбцы не меняли свою ширину - только последний. Если так можно?

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

Это сообщение отредактировал(а) Amphiluke - 27.8.2010, 12:01
PM   Вверх
GrafF812
Дата 27.8.2010, 12:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Цитата(Amphiluke @  27.8.2010,  11:52 Найти цитируемый пост)
Что получается, мы изменяем ширину, допустим, первого столбца, а в результате меняется ширина последнего
 Почти, смотрите когда мы меняет размер первого столбца, он меняет свою ширину. Но поскольку таблица должна быть фиксированной ширины (700-800 px), то ширина второго столбца станет меньше или больше (за счет изменения ширины первого). А мне нужно, чтобы ширина второго и соответственно других столбцов не менялась. Менялась бы ширина только последнего столбца  на эту дельту ширины изменения первого столбца. Надеюсь понятно объяснил  smile  
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 12:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Вот заменить обработчик 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">
PM   Вверх
GrafF812
Дата 27.8.2010, 12:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, да это именно то что мне нужно, только Вот знаете что я заметил, например если изменять ширину первого столбца, то все нормально, а если изменять ширину других столбцов, то при отпускании все предыдущие Div-ы перемещаются на небольшое расстояние 1-2 px, мне нужно чтобы они стояли не двигаясь. Вот попробуйте например потянуть за второй Div и перенести его скажем немного впрапво, после отпуская мыши первый див также сместиться немного вправо, таким образом ширина первой ячейки немного изменяется, а нужно чтобы он не менялся. smile 
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 13:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Ну так и вычесть эти два пикселя при позиционировании.
Код

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);
PM   Вверх
GrafF812
Дата 27.8.2010, 13:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, Вы знаете, все равно если перемещать 2, 3 или 4 DIV не важно вправо или влево, то первый DIV все равно смещается вправо  smile 
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 13:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Да это сама ячейка чуть-чуть расширяется, а 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. Ррр.
PM   Вверх
GrafF812
Дата 27.8.2010, 13:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
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 
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 14:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Методом бездумной подгонки можно подобрать значение поправки, чтобы работало как надо…
Код

    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  smile 
PM   Вверх
GrafF812
Дата 27.8.2010, 14:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Цитата(Amphiluke @  27.8.2010,  14:00 Найти цитируемый пост)
Методом бездумной подгонки можно подобрать значение поправки, чтобы работало как надо…

Прошу прощения, а универсальным средством можно решить эту проблему? Начальная ширина ячеек не подойдет?
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 14:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Цитата(GrafF812 @  27.8.2010,  18:05 Найти цитируемый пост)
а универсальным средством можно решить эту проблему?

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

Цитата(GrafF812 @  27.8.2010,  18:05 Найти цитируемый пост)
Начальная ширина ячеек не подойдет?

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


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

Добавлено через 2 минуты и 46 секунд
Хотел сделать через вычисляемый стиль, а везде, кроме FF выходит width: auto
PM   Вверх
GrafF812
Дата 27.8.2010, 14:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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

Цитата(Amphiluke @  27.8.2010,  14:12 Найти цитируемый пост)
Начальная ширина ячеек не подойдет?

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

Я имею в виду что при создании таблицы задавать ширину каждой ячейки в px.
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 14:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Вы правы.
Код

    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.
PM   Вверх
GrafF812
Дата 27.8.2010, 14:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, Ур-а-а-а-а-а. Все просто СУПЕР, огромнейшее Вам спасибо.  smile Извините, позвольте мне задать последний к Вам вопрос, смотрите Вы реализовали перетаскивание с помощью DIV-ов, (красного цвета). Можно ли сделать так, чтобы они были не видимыми, а в момент захвата мышкой появлялась тоненькая черная линия и вместе с перемещением мышки двигалась. Ну как в Word-e.
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 14:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Вот. Выложу всё в одном месте, вдруг кому еще понадобится результат наших с вами изысканий. 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.


Это сообщение отредактировал(а) Amphiluke - 27.8.2010, 14:51
PM   Вверх
GrafF812
Дата 27.8.2010, 14:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, Ур-а-а-а-а-а. Все просто СУПЕР, огромнейшее Вам спасибо.  smile Извините, позвольте мне задать последний к Вам вопрос, смотрите Вы реализовали перетаскивание с помощью DIV-ов, (красного цвета). Можно ли сделать так, чтобы они были не видимыми, а в момент захвата мышкой появлялась тоненькая черная линия и вместе с перемещением мышки двигалась. Ну как в Word-e.
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 14:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Я сделал, чтобы появлялась точечная рамка вокруг div'ов. Вы же, если хотите, можете вместо этого устанавливать перетаскиваемому div'у специальный background с изображением черной линии, а при отпускании мыши вновь устанавливать background: none.
PM   Вверх
GrafF812
Дата 27.8.2010, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, Я Вас очень прошу покажите пожалуйста, у меня почему-то не получается DIV разместить ровно по середине границе самой таблицы.
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 15:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

    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
PM   Вверх
GrafF812
Дата 27.8.2010, 16:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, о-о-о смещение, это мне и нужно было. Да кстати забыл спросить, когда хватаем за DIV, то его можно тянуть куда угодно, а можно ли сделать ограничение в пределах двух ячеек, между которых захватываемый DIV, вот на рисунке примерно нарисовал.
user posted image
т.е чтобы перемещать границу DIV можно было бы не дальше этих границ.
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 18:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Сценарий разрастается (как и ваши аппетиты)  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 секунды
Давайте уже сами начинайте подстраивать код под свои нужды.
PM   Вверх
GrafF812
Дата 27.8.2010, 18:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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

Добавлено через 1 минуту и 58 секунд
GrafF812, а можно ли сделать чтобы к левой и правой границе таблице также за 10 px нельзя было переместить?
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 18:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Ага. Так и пишите: «не хочу сам разбираться!». Тут буквально в двух местах подставить эти слагаемые в 10px. Вы не собираетесь вникать в код, который здесь для вас уж три страницы крутится? smile
PM   Вверх
GrafF812
Дата 27.8.2010, 18:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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

Добавлено через 4 минуты и 15 секунд
Цитата(Amphiluke @  27.8.2010,  18:21 Найти цитируемый пост)
Ага. Так и пишите: «не хочу сам разбираться!». Тут буквально в двух местах подставить эти слагаемые в 10px.

я просто плохо владею JS и хочу по Вашему примерчику разобраться как делать дальше самостоятельно, подскажите пожалуйста в какой функции Вы подставляете расстояние до DIV-ов, тут еще вот в чем дело, у Вас рассчитывается расстояние только до DIV-ов, а нужно еще учитывать границы самой таблицы. Сделайте пожалуйста, Вы мне очень помогли я Вам безумно благодарен, больше беспокоить не буду  smile 
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 18:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Вот здесь эти 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 соответственно левая и правая границы, за которые нельзя утащить сплиттер.
PM   Вверх
GrafF812
Дата 27.8.2010, 18:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Цитата(Amphiluke @  27.8.2010,  18:21 Найти цитируемый пост)
Ага. Так и пишите: «не хочу сам разбираться!». Тут буквально в двух местах подставить эти слагаемые в 10px.

я просто плохо владею JS и хочу по Вашему примерчику разобраться как делать дальше самостоятельно, подскажите пожалуйста в какой функции Вы подставляете расстояние до DIV-ов, тут еще вот в чем дело, у Вас рассчитывается расстояние только до DIV-ов, а нужно еще учитывать границы самой таблицы. Сделайте пожалуйста, Вы мне очень помогли я Вам безумно благодарен, больше беспокоить не буду  smile 
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 18:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
У меня почему-то ваши сообщения двоятся… smile  Что бы это значило?
Код я вам дал. Работает?
PM   Вверх
GrafF812
Дата 27.8.2010, 18:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет
Amphiluke, Спасибо Вам большое за все, Вам +1000000000
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.2235 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.