Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   drag & drop, mouseup (https://javascript.ru/forum/events/29438-drag-drop-mouseup.html)

cyber 01.07.2012 16:38

Цитата:

Сообщение от vadim5june (Сообщение 185652)
setTimeout(function(){
                  action.move(e);},20);

При тайм-ауте событие e не передается-теряется

ошибаетесь , передает

cyber 01.07.2012 16:40

когда интерпретатор не находит переменную e в функции Timeout он обращается к LexicalEnvironment move_wrap и там находит е ...

melky 01.07.2012 16:52

Цитата:

Сообщение от vadim5june (Сообщение 185652)
setTimeout(function(){
                  action.move(e);},20);

При тайм-ауте событие e не передается-теряется

а как же замыкания?

vadim5june 01.07.2012 16:58

Цитата:

Сообщение от melky (Сообщение 185657)
а как же замыкания?

Передаются-я уже в хроме попробовал

cyber 01.07.2012 17:04

vadim5june, почитайте http://learn.javascript.ru/closures :)

Deff 01.07.2012 17:46

cyber,
недочеты в Opere 11.6 http://video.yandex.ru/users/hostjs-mybb2011/view/17/

cyber 01.07.2012 17:53

а, это я просто не обновил файлы на сервере=)
щас сек=)

cyber 01.07.2012 17:56

все теперь обновил
http://cyberua.16mb.com/drag&drop/

Deff 01.07.2012 18:12

cyber,
Сейчас отлично, - одно не нравицо: - Выделения всех элементов нижележащих строк в DOM (Оперa) при перетаскивании

Как выход: - Возможно стоит под перетаскиваемый объект(пока тащицо), ставить png прозрачку во весь экран width:100% height:100%; position:fixed;


cyber 01.07.2012 18:17

спасибо что напомнил =)
зделаю проще,пока перетаскивается элемент сброшу выделение для document

cyber 01.07.2012 18:43

жесть...
после добавление события
Event.addListener(document,"selectstart",drag.select_st,false);

перестает работать mouseup =)

cyber 01.07.2012 19:42

решено=)
http://cyberua.16mb.com/drag&drop/
кстати такой баг только в опере=)

Deff 01.07.2012 20:13

Цитата:

Сообщение от cyber
решено=)
http://cyberua.16mb.com/drag&drop/
кстати такой баг только в опере=)

:victory: Пока всё Отлично Работает!

cyber 01.07.2012 20:23

осталось анимацию допилить=)

Deff 01.07.2012 20:35

Цитата:

Сообщение от cyber
осталось анимацию допилить=)

В принципе давно мечта допилить у себя мягкую посадку в корзину чмокo/чмопокующим звуком (Пока не нашел прилично-короткий звукоряд) есть мелодийка - но какая то ни бе - ни ме

cyber 01.07.2012 20:40

блин вроде какае то анимация а напрягу=)
если использовать css3 анмацию нужно писать проверку на поддержку браузером (свои нюансы), а js не хочу(не то что лень писать, просто не хочу)

cyber 01.07.2012 20:55

бред какой , анимации не работает не в чем кроме хрома
.animate_for_old_postion{
	-webkit-transition-property:left,top;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:ease;
	
   -moz-transition-property:left,top;
	-moz-transition-duration:1s;
	-moz-transition-timing-function:ease;
	
	transition-property:left,top;
	transition-duration:1s;
	transition-timing-function:ease;
	
	-o-transition-property:left,top;
	-o-transition-duration:1s;
	-o-transition-timing-function:ease;
	}

devote 01.07.2012 21:18

Цитата:

Сообщение от cyber
бред какой , анимации не работает не в чем кроме хрома

у меня все работает:
<!doctype hrml>
<html>
<head>
<style type="text/css">
.animate_for_old_postion{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: fixed;

    -webkit-transition-property:left,top;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease;
     
    -moz-transition-property:left,top;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:ease;

    -o-transition-property: left,top;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease;

    transition-property:left,top;
    transition-duration:1s;
    transition-timing-function:ease;
}
.animate_for_old_postion:hover {
    left: 100px;
    top: 100px;
}
</style>
</head>
<body>
<div class="animate_for_old_postion"></div>
</body>
</html>

cyber 01.07.2012 21:21

Цитата:

Сообщение от devote (Сообщение 185723)
у меня все работает:
<!doctype hrml>
<html>
<head>
<style type="text/css">
.animate_for_old_postion{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: fixed;

    -webkit-transition-property:left,top;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease;
     
    -moz-transition-property:left,top;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:ease;

    -o-transition-property: left,top;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease;

    transition-property:left,top;
    transition-duration:1s;
    transition-timing-function:ease;
}
.animate_for_old_postion:hover {
    left: 100px;
    top: 100px;
}
</style>
</head>
<body>
<div class="animate_for_old_postion"></div>
</body>
</html>

я этот код взял из своего color picker он там тоже работает=)
а вот в этом скрипте нет=)
тут можно глянуть http://cyberua.16mb.com/drag&drop/

Deff 01.07.2012 21:28

cyber,
ну есть воть от Гвоздь => http://javascript.ru/forum/job/28764...tml#post183237
Или так
Цитата:

<style type="text/css">
img[unselectable]{
transition-property:left,top;
-webkit-transition-property:left,top;
-moz-transition-property:left,top;
-o-transition-property:left,top;
-ms-transition-property:left,top;

transition-duration: 0.06s;
-webkit-transition-duration: 0.06s;
-moz-transition-duration: 0.06s;
-o-transition-duration: 0.06s;
-ms-transition-duration: 0.06s; /* IE9+ */
}
</style>

cyber 01.07.2012 21:36

Цитата:

Сообщение от Deff (Сообщение 185725)
cyber,
ну есть воть от Гвоздь => http://javascript.ru/forum/job/28764...tml#post183237
Или так

тут дело не в css , а именно js , я этот код выдрал из своего color picker где он прекрасно работает.
решил что сделаю проверку.
кстати этот код работает в опере 11.61 (поставил себе наконецто).
в том коде что ты дал ссылку нужно юзать jQuery а принципиально пишу без них=)
и кстати анимацию будет легко сделать так как у меня уже есть начальная позиция элемента и текущая, короче можно в отдельный файл выносить анимацию=)

cyber 01.07.2012 21:40

animate: function(){
		 var time = 1;//длительность анимации в секундах
		 
		 drag.obj.style.left = old.X+"px";
		  
		  drag.obj.style.top = old.Y+"px";
		 
		
		  cls.addClass(drag.obj,"animate_for_old_postion"); 
		   
		   return (time*1000) - 100;
		 }


time  = action.animate();
							 
							   setTimeout(function(){
							    
								  old.state()
							       cls.removeClass(drag.obj,"animate_for_old_postion");
							   },time);

Deff 01.07.2012 21:45

cyber,
Я тьву и css дал -уже подстроенный под тьву

cyber 01.07.2012 21:47

Цитата:

Сообщение от Deff (Сообщение 185731)
cyber,
Я тьву и css дал -уже подстроенный под тьву

:blink: а по русски?

cyber 01.07.2012 21:50

не работает даже в хроме
<style type="text/css">
img[unselectable]{
transition-property:left,top;
-webkit-transition-property:left,top;
-moz-transition-property:left,top;
-o-transition-property:left,top;
-ms-transition-property:left,top;

transition-duration: 0.06s;
-webkit-transition-duration: 0.06s;
-moz-transition-duration: 0.06s;
-o-transition-duration: 0.06s;
-ms-transition-duration: 0.06s; /* IE9+ */
}
</style>

кстати не работает по тому что не указан тип анимации=)
Ладно пошел за пивом, а то скоро футбол=)

Deff 01.07.2012 22:12

Цитата:

Сообщение от cyber
не работает даже в хроме

В опере работает http://hostjs-mybb2011.narod.ru/cyber.htm
Но появляются траблы - нун отслеживать скорость перемещения (даж без нажатия мыши) - ты её пульнул - а она при "нахождении над" - должна упасть(притянуться) в корзину или вернуться(после 0 скорости) т.е тестить попадание в корзину при наличии скорости даже при отсутствии нажатости

Замечу, что css-анимация в Опере начинает запускаться через только минуту

Deff 01.07.2012 23:03

Пришел к выводу, о необходимости события: - объект в движении...
Извернутый способ - закрепить к mousedown-отому" объекту пиксельную прозрачку так:
чтобы прозрачка изначально упиралась в верхний -нижний край экрана(высота:100%):
- и отслеживать событие: скролл экрана.

Есть плюс от этого:- перемещающийся объект будет вcегда в зоне видимости;
Откреплять прозрачку при падении в корзину или возврате в исходную позицию

cyber 02.07.2012 00:30

Цитата:

Сообщение от Deff (Сообщение 185735)
В опере работает http://hostjs-mybb2011.narod.ru/cyber.htm
Но появляются траблы - нун отслеживать скорость перемещения (даж без нажатия мыши) - ты её пульнул - а она при "нахождении над" - должна упасть(притянуться) в корзину или вернуться(после 0 скорости) т.е тестить попадание в корзину при наличии скорости даже при отсутствии нажатости

Замечу, что css-анимация в Опере начинает запускаться через только минуту

да я это все уже решил=)

up : function(evt){
		  
	   var last_posX, last_posY, drop_elem, e, time;
		
		 if(!drag.obj)return
		
		 e = evt || event;
		 
		 action.mouseup = true;
            
			Event.removeListener(document,"mousemove", action.move_wrap,false);
		     
			  Event.removeListener(document,"mouseup", action.up,false);
		  
		   if(drop.lastElem){
			  
			   drop_out.call(drop.lastElem, drag.obj);
			  
			   } 
			    unselect.remove(drag.obj); 
				   drag.obj.style.zIndex = '';
				
				   	
				 drag.status = false;
				
				 drop_elem = action.serchAttr_drop(e.clientX,e.clientY);//проверка собтие mouseup произошло над drop блоком || нет
				 
				  if(drop_elem){
					 action.count++;
					  elemnt_drop.call(drag.obj, drop_elem);
						
						 if(action.auto != "stop" && param.auto_size) {
						  
						   action.width_height(drop_elem);
						  
						  } 
						
					  } else {			  
		                  
						   old.parent.insertBefore (drag.obj,old.nextSibl);
					       
						     time  = action.animate();//вот эта функция и timeout есть решение=)
							 
							   setTimeout(function(){
							    
								  old.state()
							       cls.removeClass(drag.obj,"animate_for_old_postion");
							   },time);
					  };
					  
			          
					  
					 
				},	  
		 
	 animate: function(){
		 var time = 1;//длительность анимации в секундах
		 
		 drag.obj.style.left = old.X+"px";
		  
		  drag.obj.style.top = old.Y+"px";
		 
		
		  cls.addClass(drag.obj,"animate_for_old_postion"); 
		   
		   return (time*1000) - 100;
		 },

cyber 02.07.2012 00:31

но начинаются какие траблы с работай везде кроме хрома=)


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