Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   drag&drop при перекрывающихся блоках (https://javascript.ru/forum/misc/58846-drag-drop-pri-perekryvayushhikhsya-blokakh.html)

фонарик 13.10.2015 23:32
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 14.10.2015 02:11
Цитата:
Сообщение от фонарик
Как сделать так чтобы серый блок нельзя было перетаскивать при нажатии на зеленый блок?
Замени:
Цитата:
Сообщение от фонарик 
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 14.10.2015 02:12
Цитата:
Сообщение от фонарик
И второй вопрос. После того как перетащил куда-нибудь серый блок, в консоле штампуются ошибки: "mousePageXY is not defined". Как это исправить?
 
document.onmouseup = function(){ 
   obj.clicked = false;
   document.onmousemove = function(e){
       mousePageXY(e)
   };
};

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

фонарик 14.10.2015 17:29
Цитата:
Сообщение от Decode (Сообщение 391870)
Вот тут вызывается эта функция, но в приведенном тобой коде нет определения функции mousePageXY.
Действительно нет, ее и у меня нет )) Просто удалил строку. Функцию перетаскивания я нашел в интернете, наверно забыли убрать это из кода :)
Decode,
Спасибо вам, все работает теперь как надо :)

фонарик 14.10.2015 17:56 
<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 14.10.2015 18:09
фонарик,
onmousedown="if (event.target.id != 'gray') return; drag_object(event, event.target);

фонарик 14.10.2015 18:13
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>


Часовой пояс GMT +3, время: 00:47.