VPF::Раздвинуть ячейку при помощи мышки

IZ@TOP

Дата 29.3.2005, 08:21 (ссылка)

(нет голосов)

Загрузка ...

Панда-бир!

Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73

САБЖ. Интересно стало, возможно ли подобное реализовать, чтобы при захвате границы ячейка ее размеры можно было растянуть? Может кто-то уже реализовывал подобное?

Присоединённый файл ( Кол-во скачиваний: 10 )

tbl1.jpg

--------------------

Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли

trix

Дата 29.3.2005, 17:13 (ссылка)

(нет голосов)

Загрузка ...

Observer Grabus

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

Репутация: нет
Всего: 12

теоретически возможно, и по-мойму даже не очень трудно, но я не пробовал.

--------------------

Тупое, бездушное SMS никогда, слышите вы? никогда не заменит живое общение по ICQ!

S.A.P.

Дата 29.3.2005, 17:18 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

Репутация: 8
Всего: 71

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

Sardar

Дата 29.3.2005, 17:24 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Можно, по идее отлавливая onmouse(move|down|up) на таблице, но учитывая геморойность оных(резолюция mousemove низкая, через раз), придётся отлавливать события и на документе.

Мне это же нужно сделать для окошка в меню для нашего FAQ'а, код простой, выложу попозже сюда. Я применил другой подход, двигаем только рамку, как отпустили кнопку, окошко приняло новые размеры. Так браузер не нагружается при сложной разметке(меню).

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Reptor

Дата 29.3.2005, 20:35 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

Репутация: нет
Всего: 0

А как узнать что мышка находиться в области рамки (над рамкой)?

Sardar

Дата 29.3.2005, 20:40 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Reptor открывай отдельный топик smile

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

--------------------

IZ@TOP

Дата 29.3.2005, 20:43 (ссылка)

(нет голосов)

Загрузка ...

Панда-бир!

Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73

Да, пожалуйста, если не трудно, покажите пару примеров.

--------------------

Reptor

Дата 29.3.2005, 20:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

Репутация: нет
Всего: 0

Ещё один вопрос: а что это за событие?

Aliance

Дата 29.3.2005, 21:11 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата(Reptor @ 29.3.2005, 20:43)

ё один вопрос: а что это за событие?

Цитата(Reptor @ 29.3.2005, 20:35)

А как узнать что мышка находиться в области рамки (над рамкой)?

onmouseover ( подробнее тут )

Цитата(IZ @ 29.3.2005, 20:43)

Да, пожалуйста, если не трудно, покажите пару примеров.

Чего именно? Полностью скрипта или только события?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

IZ@TOP

Дата 29.3.2005, 21:39 (ссылка)

(нет голосов)

Загрузка ...

Панда-бир!

Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73

Aliance, алгоритма действий, пожалуйста.

--------------------

Aliance

Дата 29.3.2005, 21:46 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

IZ@TOP

Цитата(Sardar @ 29.3.2005, 17:24)

Можно, по идее отлавливая onmouse(move|down|up) на таблице, но учитывая геморойность оных(резолюция mousemove низкая, через раз), придётся отлавливать события и на документе.

Мне это же нужно сделать для окошка в меню для нашего FAQ'а, код простой, выложу попозже сюда. Я применил другой подход, двигаем только рамку, как отпустили кнопку, окошко приняло новые размеры. Так браузер не нагружается при сложной разметке(меню).

Вот тебе и алгоритм и надежда на скрипт 8)) Скрипт довольно большой, не думаю что я его напишу быстрее чем Sardar. Хотя можно попробовать :-) Только наводящий вопрос: это обязательно делать только таблицей, или можно контейнерами (вид будет такой же...)

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

IZ@TOP

Дата 30.3.2005, 07:58 (ссылка)

(нет голосов)

Загрузка ...

Панда-бир!

Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73

Ну это понятно. Ладно, сознаюсь, хочу пример smile

У меня всегда проблемы были с этими событиями и лолгикой их работы.

--------------------

IZ@TOP

Дата 30.3.2005, 09:15 (ссылка)

(нет голосов)

Загрузка ...

Панда-бир!

Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73

Я вроде нечал понимать что к чему. Но вот столкнулся с проблемой: как узнать ширину srcElement если она явно не задана?
И какое событие мне нужно использовать чтобы поймать перетаскивание ячейки? Другими словами - когда мышкой хватаем край ячейка и тащим.
Нашел вроде:

Код


document.getElementById('id').attachEvent('ondrag', func);

? Что-то вроде этого?
Нет, это похоже не то. Мне надо наверное сначало onmousedown поймать, потом действовать по onmousemove, после чего отслеживать onmouseup?

--------------------

IZ@TOP

Дата 30.3.2005, 10:23 (ссылка)

(нет голосов)

Загрузка ...

Панда-бир!

Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73

Все, с перетаскиванием разобрался. Теперь нужно только получить текущую ширину объекта.
Добавлено @ 10:31
Да, еще бы кто подсказал как при определенном событии изменить курсор?
Добавлено @ 10:32
Вот кстате, работает. Только не совсем так как надо:

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Resample table test</title>
<style>
    * {
        color:#999999;
        font-family:Verdana;
        font-size:11px;
    }
    
    td {
        color:#999999;
    }

    a.resample {
        color:#666666;
        font-weight:normal;
        text-decoration:underline;
    }
    
    th.resample {
        color:#666666;
        font-weight:normal;
        background-image:url('resample-title.jpg');
        cursor:default;
    }
    
    table.resample {
        border-color:#FFFFFF;
        border-style:solid;
        border-collapse:collapse;
        border-width:1px;
    }
    
    td {
        border-color:#F8F8F3;
    }

    div.resample {
        width:80%;
        height:300;
        overflow-x:auto;
        overflow-y:auto;
        border-color:#CCCCCC;
        border-style:solid;
        border-collapse:collapse;
        border-width:1px;
        padding:1px;
    }
    
</style>
</head>
<body>
<div class="resample" id="table">
    <table class="resample" border="1" cellspacing="0" cellpadding="4">
     <tr id="retr" height="29" onMouseMove="el_resize(event);">
       <th id="1" class="resample" align="center"><a href="?asort=id" class="resample">ID</a></th>
       <th id="2" class="resample" align="left"><a href="?asort=name" class="resample">Название</a></th>
       <th id="3" class="resample" align="left"><a href="?asort=man" class="resample">Производитель</a></th>
            <th id="4" class="resample" align="right"><a href="?asort=price" class="resample">Цена</a></th>
            <th id="4" class="resample" align="right"><a href="?asort=ad,name" class="resample">AD</a></th>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">1</td>
       <td>АККПЛС/43-8567 с турбоподсосом</td>
       <td bgcolor="#F7F7F4">/Германика Паллас/</td>
       <td align="right">5 865.35</td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">2</td>
       <td>АККПЛС/43-8568 с турбоподсосом</td>
       <td bgcolor="#F7F7F4">/Германика Паллас/</td>
       <td align="right">5 666.58</td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">3</td>
       <td>Турбина ПТС84/887 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">3 458.00 </td>
       <td align="right"><input type="checkbox" name="checkbox" value="checkbox"></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">4</td>
       <td>Турбина ПТС84/888 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">28 645.56 </td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">5</td>
       <td>Турбина ПТС84/889 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">32 555.00 </td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     </table>
</div>
<script>

var el_actived    = false;
var el_use        = null;

var el_x = 0, el_y = 0, el_offset = 0;

document.getElementById('retr').attachEvent('onmousedown', el_down);
document.getElementById('retr').attachEvent('onmouseup', el_up);

function el_down(e) {
    if(e.button != 1) return false;
    el_actived        = true;
    el_use        = e.srcElement;
    el_use.style.cursor    = 'e_resize';
    el_offset    = e.offsetX;
    getPosition(el_use);
    window.status = (e.offsetX + " - " + el_x + " - " + el_y);
}

function el_up(e) {
    el_x    = 0;
    el_y    = 0;
    el_actived        = false;
    el_use.style.cursor    = 'default';
}

function el_resize(e) {
    if(el_use != e.srcElement) return false;
    if(el_actived != true) return false;
    if(el_offset > e.offsetX) {
        el_use.width    = e.offsetX + 1;
    } else {
        el_use.width    = e.offsetX - 1;
    }
    window.status = (e.offsetX + " - " + el_x + " - " + el_y);
    return true;
}

function getPosition(obj) { 
    while(obj) {
        el_x += obj.offsetLeft;
        el_y += obj.offsetTop;
        obj = obj.offsetParent;    
    }
}
alert(document.styleSheets[0].cssRules[0].selectorText);
</script>
</body>
</html>

Я вот думаю, как бы мне сделать так, чтобы ячейка получила свойство перетаскиваемого объекта? А то когда мышку передвигаешь, курсор начинает мигать, время от времени превращаясь в песочные часы.

--------------------

Aliance

Дата 30.3.2005, 13:33 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

IZ@TOP
Видимо ты используешь onmousemove, а как сказал Sardar - лучше onmouseup|down, меньше глюков и тормозов будет.

Цитата(IZ @ 30.3.2005, 10:23)

Да, еще бы кто подсказал как при определенном событии изменить курсор?

Изменяя св-во CSS:

Код


ссылкаНаЭлемент.style.cursor = "help";

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »