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

Поиск:

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

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


 




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


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

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