drag&drop при перекрывающихся блоках

[фонарик]

Доброго времени суток, помогите пожалуйста решить проблему. На сереньком блоке висит функция перетаскивания блока. В нем находится другой блок - зелененький, на него повешены другие события мышки. Как сделать так чтобы серый блок нельзя было перетаскивать при нажатии на зеленый блок? Событие все равно почему-то срабатывает.
И второй вопрос. После того как перетащил куда-нибудь серый блок, в консоле штампуются ошибки: "mousePageXY is not defined". Как это исправить?

<div id='gray' style=" position:absolute; border:1px solid blue; background-color: #C0C0C0; width:100px; height:100px; cursor:pointer" >
  <div style="border:1px solid red; background-color:#33FF66; width:40px; height:40px" id="green"></div>
</div>
<script>
document.getElementById('gray').onmousedown = function(event){drag_object(event, this)}
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(e){mousePageXY(e)} }
	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;

			obj.style.left = posLeft + mousePosX - obj.mousePosX + 'px';
			obj.style.top = posTop + mousePosY - obj.mousePosY + 'px';
			
			obj.mousePosX = mousePosX;
			obj.mousePosY = mousePosY;
		}
	}
}

	function setcookie( name, value, timeout )
	{
	    timeout = timeout || 1000*60*60*24;
	    expires = (new Date((new Date).getTime() + timeout)).toUTCString();
	    document.cookie = name + '=' + value + ';expires=' + expires;
	}
</script>

[Decode]

Как сделать так чтобы серый блок нельзя было перетаскивать при нажатии на зеленый блок?

Замени:

document.getElementById('gray').onmousedown = function(event){drag_object(event, this)}

На:

document.getElementById('gray').onmousedown = function(event){
      if (event.target.id != 'gray') return;
      drag_object(event, event.target);
};

[Decode]

И второй вопрос. После того как перетащил куда-нибудь серый блок, в консоле штампуются ошибки: "mousePageXY is not defined". Как это исправить?

document.onmouseup = function(){ 
   obj.clicked = false;
   document.onmousemove = function(e){
       mousePageXY(e)
   };
};

Вот тут вызывается эта функция, но в приведенном тобой коде нет определения функции mousePageXY.

[фонарик]

Вот тут вызывается эта функция, но в приведенном тобой коде нет определения функции mousePageXY.

Действительно нет, ее и у меня нет )) Просто удалил строку. Функцию перетаскивания я нашел в интернете, наверно забыли убрать это из кода
Decode,
Спасибо вам, все работает теперь как надо

[фонарик]

<div id='gray' onmousedown = function(event){drag_object(event, this)} style=" position:absolute; border:1px solid blue; background-color: #C0C0C0; width:100px; height:100px; cursor:pointer" >
  <div style="border:1px solid red; background-color:#33FF66; width:40px; height:40px" id="green"></div>
</div>
<script>
//document.getElementById('gray').onmousedown = function(event){drag_object(event, this)}
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;

			obj.style.left = posLeft + mousePosX - obj.mousePosX + 'px';
			obj.style.top = posTop + mousePosY - obj.mousePosY + 'px';
			
			obj.mousePosX = mousePosX;
			obj.mousePosY = mousePosY;
		}
	}
}

	function setcookie( name, value, timeout )
	{
	    timeout = timeout || 1000*60*60*24;
	    expires = (new Date((new Date).getTime() + timeout)).toUTCString();
	    document.cookie = name + '=' + value + ';expires=' + expires;
	}
</script>

Если 5ю строку, что вешает функцию, перенести в сам див блок, то не получается ее прилепить к блоку Как не пробовал, не работает Подскажите пожалуйста, как надо ?

[Decode]

фонарик,

onmousedown="if (event.target.id != 'gray') return; drag_object(event, event.target);

[фонарик]

Decode, все работает, спасибо.

<div id='gray' onmousedown="if (event.target.id != 'gray') return; drag_object(event, event.target)"; style=" position:absolute; border:1px solid blue; background-color: #C0C0C0; width:100px; height:100px; cursor:pointer" >
  <div style="border:1px solid red; background-color:#33FF66; width:40px; height:40px" id="green"></div>
</div>
<script>
//document.getElementById('gray').onmousedown = function(event){drag_object(event, this)}
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;

			obj.style.left = posLeft + mousePosX - obj.mousePosX + 'px';
			obj.style.top = posTop + mousePosY - obj.mousePosY + 'px';
			
			obj.mousePosX = mousePosX;
			obj.mousePosY = mousePosY;
		}
	}
}

	function setcookie( name, value, timeout )
	{
	    timeout = timeout || 1000*60*60*24;
	    expires = (new Date((new Date).getTime() + timeout)).toUTCString();
	    document.cookie = name + '=' + value + ';expires=' + expires;
	}
</script>