Модераторы: 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   Вверх
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




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


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

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