Меню
Что нового?

Prototype.js, scriptaculous.js, прозрачность слоёв. Проблема.

Camillo

Новичок
Prototype.js, scriptaculous.js, прозрачность слоёв. Проблема.

Сразу прошу прощения, что запостил сюда тему, которая с PHP вообще никак не связана, но мне почему-то показалось, что ответ на этот вопрос будет интересно узнать всем, кто так или иначе в своей работе использует js фреймворк prototype.js и набор визуальных эффектов scriptaculous.js.

Задача: Имеется 2 слоя. Один слой с прозрачностью 0.4 (id="main_cotainer"); на нем лежит другой не прозрачный слой (id="sub_container"). Верхний слой "связан" с нижним с помощью position:relative. Необходимо орагнизовать drag & drop этой связки. При этом прозрачность нижнего и верхнего слоя на протяжении всего процесса drag & drop (onStart(), onDrag(), onEnd()) долны оставаться такими, какими они были до этого. Вот пример кода. Он очень простой.
Код: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<style>
	#main_container {
		background-color:#CCCCCC;
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
		-moz-opacity: 0.2;
		opacity: 0.2;
		padding:50px;
		width:300px;
		text-align:center;
	}
	#sub_container {
		color:#FF00CC;
		font-weight:bold;
		position:relative;
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;		
		z-index:1;
	}
</style>

</head>
<body>

<div id="main_container">
	<div id="sub_container">
		HELLO WORLD!	
	</div>
</div>

<script type="text/javascript" language="javascript">
	new Draggable('main_container');
</script>

</body>
</html>
Код работает - контейнер перетаскивается, но при этом прозрачность слоя меняется непонятным образом. И, что самое важное - меняется прозрачность слоя id="sub_container" на ту же прозрачность, что и у слоя с id="main_container". Хорошо... пусть это какие-то внутренние проблемы объекта Draggable. Допустим далее я хочу средставами prototype.js назначить слою "sub_container" необходимую прозрачность. Добавляю после создания объекта Draggable из-ие стиля для слоя id="sub_container"
Код: 
<script type="text/javascript" language="javascript">
	new Draggable('main_container');

	$('sub_container').setStyle({
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100),
		-moz-opacity: 1,
		opacity: 1
	});

</script>
Всё нормально - верхний слой становится 100% видимым, но при этом ___КОНТЕЙНЕР НЕВОЗМОЖНО ПЕРЕДВИГАТЬ___! Почему?
Если бы я смог решить этот вопрос, то проблему изм-ия прозрачности решилбы через назначение стилей через prototype.js и вызова соответствующих ф-ий onStart(), onDrag(), onEnd() объекта Draggable.

Возможно стиль для id="sub_container" нужно назначать при "регистрации" объекта Draggable?

Кто-нибудь сталкивался с похожей проблемой? Буду признателен любому совету.
 

dimagolov

Новичок
почему именно ___КОНТЕЙНЕР НЕВОЗМОЖНО ПЕРЕДВИГАТЬ___ вполне можно отладить алертами и разобраться.

что касается изменения прозрачности - скорее всего Draggable сам меняет стили прозрачности при перетягивании и при этом не расчитывает, что у вложенных объектов она отличается.

ИМХО придется доработать Draggable, чтобы он запоминал перед перетаскиванием не только прозрачность основного объекта, но и всех его детей и потом корректно востанавливал.
 

Camillo

Новичок
> ИМХО придется доработать Draggable, чтобы он запоминал перед перетаскиванием не только прозрачность основного объекта, но и всех его детей и потом корректно востанавливал.

В draganddrop.js нашел куски кода, которые отвечают за изм-ие прозрачности основного объекта, но там ни слова ни сказано про изм-ие прозрачности детей этого объекта... :/ Именно поэтому я и хотел создать ф-ии, которые бы изменяли стиль id="sub_container" при регистрации объекта Draggable, а потом и при вызове ф-ий onStart(), onDrag(), onEng().

... похоже всё таки придется поковыряться с draganddrop.js.

-~{}~ 15.11.07 01:18:

Изменение прозрачности при старте и при стопе поборол закомментировав в draganddrop.js строки, отвечающие за изм-ие прозрачности:

Код: 
      endeffect: function(element) {
		  //var toOpacity = Object.isNumber(element._opacity) ? element._opacity : 1.0;
          //new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity, 
          //queue: {scope:'_draggable', position:'end'},
          //afterFinish: function(){ 
            	Draggable._dragging[element] = false 
          //}
          //}); 
      }

....

        starteffect: function(element) {
          //element._opacity = Element.getOpacity(element);
          Draggable._dragging[element] = true;
          //new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7}); 
        }
-~{}~ 15.11.07 01:19:

Но прозрачность дочернего эл-та всё равно изменяется. :/
Буду дальше думать...

-~{}~ 15.11.07 02:18:

Как оказалось в проблеме с прозрачностью дочернего эл-та виноват не scriptaculous.js, а мои кривые верстальческие руки. Ошибочно реализовал непрозрачный слой на прозрачном слое. Нужно вот так:

Код: 
<style>
.container {
	position: relative;
	width:400px;
}
.background {
	position: absolute;
	background-color:#000000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
	-moz-opacity: 0.2;
	opacity: 0.2;
}
</style>

<div class="container" id="sup">
	<div class="background"></div>
	<div class="container">
		Hello world!
	</div>
</div>
Теперь всё работает отлично! :)
 
Войдите или зарегистрируйтесь для ответа.
Сверху