скрипт Модальные окна для чата

± · 2012-10-03 15:01:58

мжно ли как то усовершенствовать скрипт, не меняя его свойства?

<script language="JavaScript1.2">
// Зона за которую можно таскать
var x = 0;
var y = 0;
var w = 100;
var h = 100;

document.onmousemove = MouseEvent;
document.onmousedown = MousePress;
document.onmouseup = MouseUnPress;

var browser = navigator.appName;
var ver = parseInt(navigator.appVersion);

if (browser != "Microsoft Internet Explorer")
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.captureEvents(Event.MOUSEMOVE);
obj = document.getElementById('WIND');
}
else
{
document.onselectstart = checkEl;
document.ondragstart = checkEl;
obj = document.all.item('WIND');
}

function checkEl()
{
return false;
}

var pressflag = false;
var oldcursx, oldcursy;
var firstflag = true;
var flag = false;

function MouseEvent(ev)
{
windx = parseInt(obj.style.left);
windy = parseInt(obj.style.top);
cursx = (browser == "Microsoft Internet Explorer") ? event.clientX : ev.clientX;
cursy = (browser == "Microsoft Internet Explorer") ? event.clientY : ev.clientY;

if(firstflag)
{
oldcursx = cursx;
oldcursy = cursy;
firstflag = false;
}

if (flag) {
obj.style.left = windx + cursx - oldcursx;
obj.style.top = windy + cursy - oldcursy;
}
oldcursx = cursx;
oldcursy = cursy;
}

function MousePress()
{
if ( (cursx > windx+x) &&
(cursy > windy+y) &&
(cursx < windx+x+w) &&
(cursy < windy+y+h) )
{
obj.style.cursor = "move";
flag = true;
}
}

function MouseUnPress()
{
if (flag)
{
pressflag = flag = false;
obj.style.cursor = "auto";
}
}
</script>

± · 2012-10-04 04:11:51

1. Что он сейчас делает? Мог бы хоть в кратце описать, что нам по коду это понимать? Можно, конечно, но долго же.
2. Усовершенствовать? Что это значит? Сократить в объёме, добавить какую-то возможность, что?
3. "Не меняя свойств" это значит не переписывая? не меняя входных переменных у функций? или что?

± · 2012-10-04 08:03:21

Сообщение от Foggy:
1. Что он сейчас делает? Мог бы хоть в кратце описать, что нам по коду это понимать? Можно, конечно, но долго же.
2. Усовершенствовать? Что это значит? Сократить в объёме, добавить какую-то возможность, что?
3. "Не меняя свойств" это значит не переписывая? не меняя входных переменных у функций? или что?

1. Позволяет таскать мышкой объекты, если я правильно понял
2. и 3. присоединяюсь к вопросам.

± · 2012-10-04 09:26:32

то ли у меня руки из опы, то ли скрипт не рабочий, но он точно должен таскать объекты, хотя так его писать Это жестоко особенно если в чате 4-я версия а не 5-я)))

± · 2012-10-04 18:27:31

Если этот вариант чем то не у страивает, есть другой - http://www.mintdesign.ru/blog/js-drag-and-drop

± · 2012-10-04 21:07:48

admiral, Спасибо за хороший скрипт. Немного модифицировал его, чтоб объект невозможно было вытащить наверх или влево ЗА окно браузера, откуда его не вернуть мышкой 😉

			var newX = posLeft + mousePosX - obj.mousePosX;
			var newY = posTop + mousePosY - obj.mousePosY;
			newX = newX < 0 ? 0 : newX;
			newY = newY < 0 ? 0 : newY;
			obj.style.left = newX + 'px';
			obj.style.top = newY + 'px';

попробовать.

Отредактированно BETEPAH (2012-10-04 21:08:22)

± · 2012-10-04 21:57:47

BETEPAH, Залипает мышь, если во время перетаскивания курсор выходит за пределы документа)))

± · 2012-10-04 22:50:55

Сообщение от Pegass:
BETEPAH, Залипает мышь, если во время перетаскивания курсор выходит за пределы документа)))

только если отпустить кнопку за пределами. Увы, если мышка за документом, он (документ) никак не может поймать onmouseup. Можно конечно попробовать останавливать курсор при достижении границ, но тогда скрипт будет разрастаться, мне кажется. Хотя... можно попробовать

± · 2012-10-05 08:11:29

а можете ещё сделать, чтоб за правый и нижний края тоже не убрать было? очень полезный скрипт)

± · 2012-10-06 18:22:29

Сообщение от Foggy:
а можете ещё сделать, чтоб за правый и нижний края тоже не убрать было? очень полезный скрипт)

Сделал. Залипания тоже убрал, теперь при выходе курсора за окно срабатывает obj.clicked = false:

function drag_object( evt, obj ) {
	evt = evt || window.event;
	obj.clicked = true;
	obj.mousePosX = evt.clientX; obj.mousePosY = evt.clientY;
	if( evt.preventDefault ) evt.preventDefault(); else evt.returnValue = false;
	document.onmouseup = function(){ obj.clicked = false }
	document.onmousemove = function( evt ) {
		evt = evt || window.event;
		if( obj.clicked ) {
			posLeft = !obj.style.left ? obj.offsetLeft : parseInt( obj.style.left );
			posTop = !obj.style.top ? obj.offsetTop : parseInt( obj.style.top );
			mousePosX = evt.clientX;
			mousePosY = evt.clientY;
			var newX = posLeft + mousePosX - obj.mousePosX;
			var newY = posTop + mousePosY - obj.mousePosY;
			var newXright = newX + obj.offsetWidth;
			var newYbottom = newY + obj.offsetHeight;
			var scrollHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
			var scrollWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
			newX = newX < 0 ? 0 : newX;
			newY = newY < 0 ? 0 : newY;
			newX = newXright > scrollWidth ? scrollWidth - obj.offsetWidth : newX;
			newY = newYbottom > scrollHeight ? scrollHeight - obj.offsetHeight : newY;
			obj.style.left = newX + 'px';
			obj.style.top = newY + 'px';
			obj.mousePosX = mousePosX;
			obj.mousePosY = mousePosY;
			if(mousePosX < 0 || mousePosY < 0 || mousePosX > scrollWidth || mousePosY > scrollHeight) obj.clicked = false;
		}
	}
}

Песочница с живым примером здесь.

± · 2012-10-06 18:48:10

ага видно подогнал я Вам темку, но по первому моему сообщению я попросил о уменьшить скрипт, облегчит, под словами про модернизировать так заключалось, и скрипт работает если что.

± · 2012-10-06 21:30:29

если бы в этом скрипте ещё был ресайз, цены бы ему не было 🐱‍👤 ну, это, конечно, на твоё усмотрение, но лично я был бы безмерно благодарен ❗
Ветеран, ты крут!)

± · 2012-10-06 23:20:44

Сообщение от Foggy:
если бы в этом скрипте ещё был ресайз

Чувствую, разработчики jquery UI на меня в суд скоро подадут за плагиат, это сейчас модно. Но я подумаю. Самому интересно разобраться с этим, думаю, сделаю рейсайз, это должно быть несложно.

Отредактированно BETEPAH (2012-10-06 23:21:44)

± · 2012-10-06 23:48:43

Сообщение от BETEPAH:
Сообщение от Foggy:
если бы в этом скрипте ещё был ресайз
Чувствую, разработчики jquery UI на меня в суд скоро подадут за плагиат, это сейчас модно. Но я подумаю. Самому интересно разобраться с этим, думаю, сделаю рейсайз, это должно быть несложно.

Да так же, только вместо left и top менять надо width и height

🐱‍👤

тсссс

Отредактированно Pegass (2012-10-07 00:21:40)

± · 2012-10-07 00:31:28

Сообщение от Pegass:
Да так же, только вместо left и top менять надо width и height

Не совсем, надо же еще о схлопывании было подумать. И кроме того, я так понимаю, что после этого захочется еще кнопку закрытия окна, а затем и апи по созданию окон из js.
Вот, что получилось в итоге - http://jsfiddle.net/BETEPAH/bhNYU/16/
скрипт в дополнение предыдущего

function resizeObject( evt, obj ) {
	evt = evt || window.event;
	obj.resize = true;
	obj.mousePosX = evt.clientX; obj.mousePosY = evt.clientY;
	if( evt.preventDefault ) evt.preventDefault(); else evt.returnValue = false;
	document.onmouseup = function(){ obj.resize = false }
	document.onmousemove = function( evt ) {
		evt = evt || window.event;
		if( obj.resize ) {
				objWidth = !obj.style.width ? obj.offsetWidth : parseInt( obj.style.width );
				objHeight = !obj.style.height ? obj.offsetHeight : parseInt( obj.style.height );
				mousePosX = evt.clientX;
				mousePosY = evt.clientY;
				obj.style.width = objWidth + mousePosX - obj.mousePosX + 'px';
				obj.style.height = objHeight + mousePosY - obj.mousePosY + 'px';
				obj.mousePosX = mousePosX;
				obj.mousePosY = mousePosY;
		}
	}
}
function createModal() {
	 var elDiv = document.createElement('div');
	elDiv.className = 'drag-window';
	document.body.appendChild(elDiv); 
	
	elSpn = document.createElement('span');
	elDiv.appendChild(elSpn); 
	elSpn.className = 'title';
	elSpn.innerHTML = 'Активная область <span title="закрыть" class="close-button" onmousedown="deleteModal(this.parentNode.parentNode)">&times;</span>';
	elSpn.onmousedown = function(event){dragObject(event || window.event, this.parentNode);};
	
	elContent = document.createElement('div');
	elDiv.appendChild(elContent); 
	elContent.className = 'content';
	elContent.innerHTML = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a href="#">aliquam erat</a> volutpat.';
	
	elResize = document.createElement('div');
	elDiv.appendChild(elResize); 
	elResize.className = 'resizeButton';
	elResize.innerHTML = '<img src="http://imgs.su/tmp/2012-10-07/1349554018-492.jpg" alt="" onmousedown="resizeObject(event, this.parentNode.parentNode)" />';
}
function deleteModal(elem) {
	elem.parentNode.removeChild(elem);
}

P.S. А если подключать jQuery, то уж тогда и UI их подключить можно и тогда вообще все вышеперечисленные требования сведутся к добавлению классов драггабле и ресайзабле. Интерес был реализовать это именно на чистом js, поразмять мозги 😉

Отредактированно BETEPAH (2012-10-07 00:37:08)

± · 2012-10-07 01:32:56

BETEPAH,
1. блок, за который надо тянуть - не в самом углу, не хватает 4px
2. можно растянуть за границы окна с появлением прокрутки
3. при подтаскивании блока к нижнему правому углу, блок резко отскакивает по диагонали назад. кстати, эта же проблема есть в скрипте Pegass(при уменьшении допустимых отступов от краёв).
4. ещё, когда создано много окон и они наезжают друг на друга, хорошо бы, чтоб по клику они получали фокус. ну, менять z-index, наверно.
или, как вариант, не давать одним блокам наезжать на другие.

± · 2012-10-07 04:10:24

:D тогда уж совсем для полноты еще не хватает пары кнопок свернуть и развернуть

± · 2012-10-07 04:13:13

admiral, да, и тогда это уже будет покушение не на jQuery UI, а на Windows 😁

± · 2012-10-07 08:12:39

BETEPAH, Давай уже допиливай)))) 1 - при ресайзе можно вытащить чуть вправо и вниз 2) залипание мыши при ресайзе если отпустить за пределами документа ))) 3) скрипт по созданию окон не плохо переделать на заполнение контентом creatModal(content,title,res_on_off ); content - контент вместе с хтмл, title - заголовок нового окна , res_on_off - можно ли изменять размер

PS jquery ui - слишком жирное удовольствие))) Может от меня отстанут с этими окошками 😊 😊

admiral, кнопки свернуть и развернуть - это слишком просто и скучно, даже писать лень))

Отредактированно Pegass (2012-10-07 08:23:49)

± · 2012-10-07 08:30:42

Pegass, писать может просто и скучно, зато в чате очень пригодилось бы. Особенно если нужно на время спрятать приватное вещание. Заново могут не разрешить 😁 а так можно было бы просто свернуть

Ссылка на новый форум

скрипт Модальные окна для чата

#1 2012-10-03 15:01:58

#2 2012-10-04 04:11:51

#3 2012-10-04 08:03:21

Сообщение от Foggy:

#4 2012-10-04 09:26:32

#5 2012-10-04 18:27:31

#6 2012-10-04 21:07:48

#7 2012-10-04 21:57:47

#8 2012-10-04 22:50:55

Сообщение от Pegass:

#9 2012-10-05 08:11:29

#10 2012-10-06 18:22:29

Сообщение от Foggy:

#11 2012-10-06 18:48:10

#12 2012-10-06 21:30:29

#13 2012-10-06 23:20:44

Сообщение от Foggy:

#14 2012-10-06 23:48:43

Сообщение от BETEPAH:

Сообщение от Foggy:

#15 2012-10-07 00:31:28

Сообщение от Pegass:

#16 2012-10-07 01:32:56

#17 2012-10-07 04:10:24

#18 2012-10-07 04:13:13

#19 2012-10-07 08:12:39

#20 2012-10-07 08:30:42