Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #101 (permalink)  
Старый 01.07.2012, 21:36
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от Deff Посмотреть сообщение
cyber,
ну есть воть от Гвоздь => Инерция drag-элемента
Или так
тут дело не в css , а именно js , я этот код выдрал из своего color picker где он прекрасно работает.
решил что сделаю проверку.
кстати этот код работает в опере 11.61 (поставил себе наконецто).
в том коде что ты дал ссылку нужно юзать jQuery а принципиально пишу без них=)
и кстати анимацию будет легко сделать так как у меня уже есть начальная позиция элемента и текущая, короче можно в отдельный файл выносить анимацию=)
Ответить с цитированием
  #102 (permalink)  
Старый 01.07.2012, 21:40
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

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);
Ответить с цитированием
  #103 (permalink)  
Старый 01.07.2012, 21:45
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

cyber,
Я тьву и css дал -уже подстроенный под тьву
Ответить с цитированием
  #104 (permalink)  
Старый 01.07.2012, 21:47
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от Deff Посмотреть сообщение
cyber,
Я тьву и css дал -уже подстроенный под тьву
а по русски?
Ответить с цитированием
  #105 (permalink)  
Старый 01.07.2012, 21:50
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

не работает даже в хроме
<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 в 22:08.
Ответить с цитированием
  #106 (permalink)  
Старый 01.07.2012, 22:12
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

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

Последний раз редактировалось Deff, 02.07.2012 в 00:28.
Ответить с цитированием
  #107 (permalink)  
Старый 01.07.2012, 23:03
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

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

Последний раз редактировалось Deff, 02.07.2012 в 00:27.
Ответить с цитированием
  #108 (permalink)  
Старый 02.07.2012, 00:30
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от Deff Посмотреть сообщение
В опере работает 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;
		 },
Ответить с цитированием
  #109 (permalink)  
Старый 02.07.2012, 00:31
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отмена drag and drop браузера l-liava-l Элементы интерфейса 0 02.04.2012 13:53
Помогите с drag and drop shtopor jQuery 1 20.02.2012 13:26
Разбираюсь с drag and drop uaNikita Events/DOM/Window 4 22.09.2011 11:25
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 13:01
Drag & Drop в полном объеме dizews Events/DOM/Window 3 26.07.2007 12:43