Лента Каталог Файлы Форумы Услуги
ОсновноеRadiotalkПользовательское
MPCHAT - CMS хостинг чатов для профессионалов
90   •   Посмотреть все темы

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

 
1 2 ... 7

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

<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>

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

1007
BETEPAH @BETEPAH
Foggy пишет:

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

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

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

6600
Александр @admiral
Если этот вариант чем то не у страивает, есть другой - **********

1007
BETEPAH @BETEPAH
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 - 04.10.2012
2615
Сергей @Pegass
BETEPAH, Залипает мышь, если во время перетаскивания курсор выходит за пределы документа)))

1007
BETEPAH @BETEPAH
Pegass пишет:

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

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

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

1007
BETEPAH @BETEPAH
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;
}
}
}
Песочница с живым примером **********.

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

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

1007
BETEPAH @BETEPAH
Foggy пишет:

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

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

Отредактировано BETEPAH - 06.10.2012
2615
Сергей @Pegass
BETEPAH пишет:

Foggy пишет:

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

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

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


🐱‍👤

**********

Отредактировано Pegass - 07.10.2012
1007
BETEPAH @BETEPAH
Pegass пишет:

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

Не совсем, надо же еще о схлопывании было подумать. И кроме того, я так понимаю, что после этого захочется еще кнопку закрытия окна, а затем и апи по созданию окон из js.
Вот, что получилось в итоге - **********
скрипт в дополнение предыдущего
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 - 07.10.2012
2970
удалён @Foggy
BETEPAH,
1. блок, за который надо тянуть - не в самом углу, не хватает 4px
2. можно растянуть за границы окна с появлением прокрутки
3. при подтаскивании блока к нижнему правому углу, блок резко отскакивает по диагонали назад. кстати, эта же проблема есть в скрипте Pegass(при уменьшении допустимых отступов от краёв).
4. ещё, когда создано много окон и они наезжают друг на друга, хорошо бы, чтоб по клику они получали фокус. ну, менять z-index, наверно.
или, как вариант, не давать одним блокам наезжать на другие.

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

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

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

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

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

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