Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.03.2017, 20:15
Аспирант
Отправить личное сообщение для Dark Souls Посмотреть профиль Найти все сообщения от Dark Souls
 
Регистрация: 06.03.2017
Сообщений: 35

Криво работает drag & drop
Доброго времени суток! Накидал предварительный скрипт, но он чего-то очень криво работает. JS изучаю недавно. Помогите разобраться плиз.
<!DOCTYPE html>

<html>

	<head>
		<meta http-equiv="charset=utf-8">
		
		<style>
			.thing {
				width: 50px;
				height: 50px;
				border: 1px solid hsl(220, 10%, 30%);
				background: hsl(220, 66%, 63%);
				margin: 5px;
				position: relative;
			}
			
			#cassa {
				width: 100px;
				height: 100px;
				border: 1px solid hsl(220, 10%, 30%);
				border-radius: 10px;
				position: absolute;
				top: 20px;
				right: 20px;
			}
		</style>		
		
	</head>
	
	<body id="clk">
		
		<div class="thing"></div>
		<div class="thing"></div>
		<div class="thing"></div>
		<div class="thing"></div>
		
		<div id="cassa"></div>
		
		<script>
		
			window.addEventListener( "load", init(), false );

			function init () {				
				
				var cassa = document.getElementById( "cassa" ), elem;
				
				document.body.addEventListener( "mousedown", function (e) {
					if ( e.target.getAttribute( "class" ) == "thing" ) {
						elem = e.target; drag( e.target, e );
					}
				});

				cassa.addEventListener( "mouseup", function (e) { drop( this, e, elem ); });
			}
			
			function drop ( box, event, elems ) {				
				if ( !elems ) return;
				
				elems.style.top = elems.style.left = "0px";
				box.appendChild( elems );
			}
			
			function drag ( elems, event ) {
				var deltaX = event.clientX - elems.offsetLeft,
					deltaY = event.clientY - elems.offsetTop;

				document.addEventListener( "mousemove", moveHendler, true );
				document.addEventListener( "mouseup", upHendler, true );
				
				function moveHendler (e) {
					if (!e) e = window.event;
					
					elems.style.left = ( e.clientX - deltaX ) + "px";
					elems.style.top = ( e.clientY - deltaY ) + "px";
				}
				
				function upHendler (e) {
					if (!e) e = window.event;
					
					document.removeEventListener( "mouseup", upHendler, true );
					document.removeEventListener( "mousemove", moveHendler, true );
				}
			} 
			
		</script>
		
	</body>
	
</html>

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 06.03.2017, 21:04
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

addEventListener методу вторым аргументам присваивается функция ... а вы ее вызываете и передаете то что возвращает то есть нечего, а если точней то undefined.
Дальше этого момента не смотрел могут быть и другие ошибки.

Последний раз редактировалось dd_smol, 06.03.2017 в 21:07.
Ответить с цитированием
  #3 (permalink)  
Старый 06.03.2017, 21:51
Аспирант
Отправить личное сообщение для Dark Souls Посмотреть профиль Найти все сообщения от Dark Souls
 
Регистрация: 06.03.2017
Сообщений: 35

Я не силен в JS, но вроде function может передаваться как переменная первого порядка. я ее вызываю для проверки и запуска второй функции.
document.body.addEventListener( "mousedown", function (e) {
    if ( e.target.getAttribute( "class" ) == "thing" ) {
        elem = e.target; drag( e.target, e );
    }
});

Вы про этот кусок кода?
Ответить с цитированием
  #4 (permalink)  
Старый 06.03.2017, 22:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,799

Сообщение от Dark Souls
Вы про этот кусок кода?
window.addEventListener( "load", init(), false ); красное лишнее
Ответить с цитированием
  #5 (permalink)  
Старый 06.03.2017, 22:10
Аспирант
Отправить личное сообщение для Dark Souls Посмотреть профиль Найти все сообщения от Dark Souls
 
Регистрация: 06.03.2017
Сообщений: 35

Спасибо!
C одним элементом стала работать отлично. А остальные все равно лагают. Сползают понимаю почему, а вот почему иногда не тянутся?
Ответить с цитированием
  #6 (permalink)  
Старый 06.03.2017, 22:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,799

Dark Souls,
https://learn.javascript.ru/drag-and-drop-objects

https://learn.javascript.ru/drag-and-drop-plus
Ответить с цитированием
  #7 (permalink)  
Старый 06.03.2017, 22:32
Аспирант
Отправить личное сообщение для Dark Souls Посмотреть профиль Найти все сообщения от Dark Souls
 
Регистрация: 06.03.2017
Сообщений: 35

Сообщение от рони Посмотреть сообщение
Dark Souls,
https://learn.javascript.ru/drag-and-drop-objects

https://learn.javascript.ru/drag-and-drop-plus
Спасибо за материал! Буду ковырять
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
drag & drop как в vk.com zerofx Элементы интерфейса 7 31.07.2015 22:02
drag and drop darl jQuery 2 15.04.2015 20:15
Помощь с Drag & Drop Zuko jQuery 0 22.03.2015 09:18
Drag and drop фокус KlausKater jQuery 1 01.03.2015 00:06
Помогите с drag and drop shtopor jQuery 1 20.02.2012 12:26