ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Растягивание div мышкой
3 сообщений из 3, страница 1 из 1
Растягивание div мышкой
    #37979170
OZKA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
OZKA
Гость
Собственно subj. Нашел на просторах интернета следующий код:
 

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
<SCRIPT LANGUAGE="JavaScript">
function hook(e) {
  //var el = e.srcElement || e.target;
  var el = document.getElementById("div_main");
  el.startX = (e.type == 'mousedown') ? (e.clientX - el.offsetWidth) : 0;
  el.startY = (e.type == 'mousedown') ? (e.clientY - el.offsetHeight) : 0;
  
  console.log("e.clientX: " + e.clientX);
  console.log("e.clientY: " + e.clientY);
  
  console.log("el.offsetWidth: " + el.offsetWidth);
  console.log("el.offsetHeight: " + el.offsetHeight);
  
}
function move(e) {
  //var el = e.srcElement || e.target;
  var el = document.getElementById("div_main");
  
  if(el.startX)
    el.style.width = e.clientX - el.startX + 'px';
  
  if(el.startY)
    el.style.height = e.clientY - el.startY + '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);
  
</script>
<style>
  #div_main {
    z-index:2;
    position:absolute;
    top:50px;
    left:100px;
    height:12%;
    width:12%;
    border:solid 1px #D6D3D6;
  }
  #div_img {
    z-index:1;
    right:0px;
    bottom:0px;
    position:absolute;
    width: 20px;
    height: 20px;
    background: url('img/Repeat.png') no-repeat;
    cursor:se-resize;
}
</style>
</head>
<body>
<div id="div_main">
    <div id="div_img" onmousedown='hook(event)' onmouseout='hook(event)'>
      &nbsp;
    </div>
 </div>
</body>
</html>




Он, как бы, работает, но не стабильно. Если медленно и аккуратно тянуть за уголок, то в общем-то тянется, если провести мышкой побыстрее, то уголок словно "выскальзывает". Если кто-то нечто подобное делал самостоятельно, без помощи JavaScript Framework'ов то буду рад услышать любые подсказки что тут можно дописать что бы оно работало примерно так же, как во всяких JQuery или ExtJs.

p.s. В HTML и Js новичок, так что если сильно глупый вопрос, прошу прощения.

---
С Уважением, Озерецковский Кирилл.
...
Рейтинг: 0 / 0
01.10.2012, 18:29:07
| Ответить | Цитировать | Написать  
Растягивание div мышкой
    #37979194
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
http://javascript.ru/ui/draganddrop
...
Рейтинг: 0 / 0
01.10.2012, 18:48:02
| Ответить | Цитировать | Написать  
Растягивание div мышкой
    #37984402
OZKA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
OZKA
Гость
Яростный Меч, спасибо за ссылку на статью! Долго мучился, с непривычки уже череп закипел, но все же получилось :)
...
Рейтинг: 0 / 0
04.10.2012, 19:33:13
| Ответить | Цитировать | Написать  
3 сообщений из 3, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Растягивание div мышкой
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=37979194&tid=1449268]:
 0ms
get settings:
 10ms
get forum list:
 17ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 205ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 229ms
total:  527ms
созд. / загр.: 527ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]