Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.03.2020, 21:06
Новичок на форуме
Отправить личное сообщение для monstrorosso Посмотреть профиль Найти все сообщения от monstrorosso
 
Регистрация: 28.03.2020
Сообщений: 6

открыть div и применить draggble
Добрый, не смог разобраться, нужно открыть более двух ДИВ объектов и перемещать их по странице, в отдельности скрипты работают, а вместе нет, как их связать не знаю.
Предоставляю весь код, заранее сори, если грубо написано. Заранее спасибо.
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">  
</head>
<body>	



<style>
		#elem1{
		display:none;
		width:100px;
		height:100px;
		border:1px solid red;
		}
		
		#elem2{
		display:none;
		width:100px;
		height:100px;
		border:1px solid red;
		}
		
		#elem3{
		display:none;
		width:100px;
		height:100px;
		border:1px solid red;
		}
			
		#elem1.active{
		display:block;
		width:33px;
		height:33px;
		position:absolute;
		top:10;
		background-color:red;
		margin:1, 1, 1;
		border:1px solid red;
		z-index:1;
		}
		
		#elem2.active{
		display:block;
		width:33px;
		height:33px;
		position:absolute;
		top:10;
		background-color:yellow;
		margin:1, 1, 1;
		border:1px solid red;
		z-index:2;		
		}
		
		#elem3.active{
		display:block;
		width:33px;
		height:33px;
		position:absolute;
		top:10;
		background-color:green;
		margin:1px, 1, 100;
		border:1px solid red;
		z-index:3;
		}
		
		#b{
		position:fixed;
		displey:block;
		}
		
		button{
		display:block;
		}
		
		#s{
		border:1px solid black;
		width:100px;
		height:100px;
		float:right;
		position:relative;
		}
		
		.left{
			position:fixed;
			left:0px;
			top:0px;
			float:left;
			}
		
</style>


	<div id="s">
	
		<div id="elem1"   draggable="true">  1hghgg</div>
		<div id="elem2"   draggable="true">  2ghghh</div>
		<div id="elem3"   draggable="true">  3ghghgh</div>
	</div>


	<div id="b" class="left">
	
		<button id="button">отк/закр1</button>
		<button id="button1">отк/закр2</button>
		<button id="button2">отк/закр3</button>
	</div>


 [js]
<script>			


			let button = document.querySelector('#button');
			let elem1 =   document.querySelector('#elem1');
			
			let button1 = document.querySelector("#button1");
			let elem2 =   document.querySelector("#elem2");
			
			let button2 = document.querySelector("#button2");
			let elem3 =   document.querySelector("#elem3");
			
			
			
			
			
		*!*	
		let offset1X;
		let offset1Y;
		button.addEventListener('click', func1);
				
		function func1(){
			
		elem1.classList.toggle("active");
		
		}
			elem1.classList.toggle("active");
	
		elem1.addEventListener("dragstart",function(event){
		offset1X = event.offset1X;
		offset1Y = event.offset1Y;
		
		});
		elem1.addEventListener("dragend",function(event){
		
		elem1.style.top = (event.pageY-offset1Y)+"px";
		elem1.style.left = (event.pageX-offset1X)+"px";
		console.log(event.pageX, event.pageY);
		
		});
                */!*

				
			
			
			button1.addEventListener('click', func2);
			function func2(){
				console.log("999");
			elem2.classList.toggle("active");
			console.log(777);
			}
			
			button2.addEventListener('click', func3);
			function func3(){
				console.log("999");
			elem3.classList.toggle("active");
			console.log(777);
			}
			
</script>


</body>

</html>

Последний раз редактировалось monstrorosso, 28.03.2020 в 21:25.
Ответить с цитированием
  #2 (permalink)  
Старый 28.03.2020, 21:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

monstrorosso,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 28.03.2020, 21:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

monstrorosso,
строки 139 -150, заменить на это
elem1.addEventListener("dragstart",function(event) {
offset1X = event.pageX;
offset1Y = event.pageY;

});
elem1.addEventListener("dragend",function(event){

elem1.style.top = (parseFloat(elem1.style.top||10) + event.pageY-offset1Y)+"px";
elem1.style.left = (parseFloat(elem1.style.left||10) + event.pageX-offset1X)+"px";
console.log(event.pageX, event.pageY);

});
Ответить с цитированием
  #4 (permalink)  
Старый 28.03.2020, 21:57
Новичок на форуме
Отправить личное сообщение для monstrorosso Посмотреть профиль Найти все сообщения от monstrorosso
 
Регистрация: 28.03.2020
Сообщений: 6

все заработало, спс. Теперь буду разбираться с ваши поправками.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
По клику на кнопку открыть сразу несколько DIV BOOSOORMAN Элементы интерфейса 3 11.03.2020 17:35
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
При клике ссылки, открыть DIV блок, надо сделать через class ProtSport94 Общие вопросы Javascript 3 11.11.2015 13:26
Открыть Div только после полной загрузки страницы xatan Общие вопросы Javascript 2 09.05.2014 06:33
Динамическое создание iframe в Firefox mrbean11 Firefox/Mozilla 8 02.11.2012 21:23