VPF::Изменение ширины div растягиванием мышкой

shine

Дата 19.11.2006, 16:38 (ссылка)

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

Загрузка ...

Шустрый

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

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

Можно ли как-то сделать растягивание div-а мышкой? По аналогии с тем как мы меняем размеры окна: за край схватил и потянул куда тебе нужно.

Спасибо.

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

An investment in knowledge always pays the best interest. © Benjamin Franklin

AKS

Дата 19.11.2006, 17:59 (ссылка)

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

Загрузка ...

Участник форума

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

Репутация: 27
Всего: 52

shine, вот "нарисовал" маленький пример:

Код


function hook(e) {
  var el = e.srcElement || e.target;
  el.startX = (e.type == 'mousedown') ? 
    (e.clientX - el.offsetWidth) : 0;
}
function move(e) {
  var el = e.srcElement || e.target;
  if(el.startX) 
    el.style.width = e.clientX - el.startX + 'px';
  (e.preventDefault) ? e.preventDefault() : e.returnValue = false;
}
if(!document.attachEvent) {
  document.attachEvent = function(e, f) {
    this.addEventListener(e.substr(2), f, false);
  }
} 
document.attachEvent('onmouseup', hook);
document.attachEvent('onmousemove', move);

Код


<div style='width:100px;height:100px;background-color:black;position:relative;' 
  onmousedown='hook(event)' onmouseout='hook(event)'></div>

Это сообщение отредактировал(а) AKS - 19.11.2006, 18:08

shine

Дата 19.11.2006, 18:41 (ссылка)

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

Загрузка ...

Шустрый

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

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

AKS, спасибо.
Вот такой получился вариант работающий в IE6, FF и Opera:

Код


function hook(e) 
{
    var el;
    if(e.srcElement) el = e.srcElement;
    else el = e.target;

    el.startX = (e.type == 'mousedown') ? (e.clientX - el.offsetWidth) : 0;
}
    
function move(e) 
{
    var el;
    if(e.srcElement) el = e.srcElement;
    else el = e.target;
    
    if(el.startX) el.style.width = e.clientX - el.startX + 'px';
    
    e.returnValue = false;
} 

if (document.addEventListener)
{
    document.addEventListener('mouseup', hook, false); 
    document.addEventListener('mousemove', move, false); 
}
else if (document.attachEvent)
{
    document.attachEvent('onmouseup', hook);
    document.attachEvent('onmousemove', move);        
}

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

An investment in knowledge always pays the best interest. © Benjamin Franklin

12345c

Дата 19.11.2006, 22:42 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Растягивание таблиц: http://js2.ru/example/zzzz49.htm

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:22

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Elfet

Дата 31.1.2007, 10:38 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

AKS, а можно пояснить пример? Я не очень понимаю как он работает. Хочу сделать растягивание, только определённых элементов на странице, а не всех. smile

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

PHP Чат Скрипт

pythonwin

Дата 2.2.2007, 07:48 (ссылка)

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

Загрузка ...

Эксперт

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

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

Elfet, измени вот эту часть:

Код


<script>d=document;g=function(a){return d.getElementById(a);}
var FF=d.all==null; /*isGecko*/
    var mDown=0;    //установки скрипта
    var posX;    //переменные скрипта
onload=function(){tdTab=[];tdTab[1]=g('tdTb1');tdTab[2]=g('tdTb2');tdTab[3]=g('tdTb3');
  if(IE=d.all&&!self.opera)g('divTdPt1').style.display='none';
  widPt3=IE?0:g('ptPt3').offsetWidth+2;
}

d.onmousedown=function(e){var t;
    if((t=FF?e.target:event.srcElement).className!="tdResize")return;    //отсечка лишнего
    mDown=t.id.charAt(8);
    posX=(FF?e.pageX:event.x+d.body.scrollLeft)-tdTab[mDown].offsetWidth;    //начальная точка захвата
    posTbl=(FF?e.pageX:event.x+d.body.scrollLeft)-g('tdResize'+mDown).offsetParent.offsetWidth;
}
d.onmousemove=function eMove(e){if(!mDown)return;
    tdTab[mDown].style.width=
      xx=Math.max(0,(FF?e.pageX:event.x+d.body.scrollLeft)-posX);
      g('tdResize'+mDown).style.width=IE?4:1;
      isPt3=(g('divTdSp'+mDown).offsetWidth>g('divTdTb'+mDown).offsetWidth)?widPt3:0;
      g('divTdPt'+mDown).style.display=IE||!isPt3?'none':'table';
      g('d2').innerHTML
        =g('divTdSp'+mDown).offsetWidth+' '
        +g('divTdTb'+mDown).offsetWidth+' '
        +isPt3
      g('divTdTb'+mDown).style.width=xx-isPt3;
      g('tdResize'+mDown).offsetParent.style.width=(Math.max(0,(FF?e.pageX:event.x+d.body.scrollLeft)-posTbl))+6;
    
}
d.onmouseup=function(e){mDown=0;}
d.ondragstart=d.onselectstart=function(){if(event.srcElement.className=="tdResize")event.returnValue=!1;}
</script>

только сделай чтобы
d не был равен document, а тому объекту, размер, которого ты хочешь менять smile

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

портал по Python
раздел на винграде по Python
язык Python

Elfet

Дата 2.2.2007, 09:24 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Ок! Спасибо! smile

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

PHP Чат Скрипт

Avb

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

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

Загрузка ...

Шустрый

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

Репутация: 4
Всего: 13

Вот еще:
http://www.jackslocum.com/blog/2006/11/24/...zable-reloaded/

feosr

Дата 18.4.2007, 07:22 (ссылка)

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

Загрузка ...

Бывалый

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

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

Мне понравилась реализация скрипта, но можноли уменьшить объем скрипта? Для работы ему нужны 3 скрипта, сумарный вес которых почти пол метра((

arbimbmet

Дата 31.8.2022, 22:51 (ссылка)

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

Загрузка ...

Новичок

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

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