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


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