Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Перемещение текста(блока)по странице - Drag & drop

Главная » Скрипты для uCoz » Перемещение текста(блока)по странице - Drag & drop
Перемещение текста(блока)по странице - Drag & drop для uCoz

Перед началом смотрим демо

Drag & drop(тяни и бросай) - это способ, при помощи которого,элементы можно перетаскивать мышкой по экрану.

Помещаем в самый низ страницы данный код:

Code
<script>  
function collectElems(){  
  var b=document.all||document.getElementsByTagName('*');  
  for(var i=0;i<b.length;i++){  
  addEvt(b[i],'mousedown',function(a){  
  if(mousePosition(a).t.className.match(/dragable/ig)){  
  dragElems(mousePosition(a).t,a)  
  }  
  })  
  }  
  }  
collectElems();  
function dragElems(b,c){  
  mousePosition(c,'p');  
  var i,x,y,l,t;  
  i=true;  
  x=mousePosition(c).x;  
  y=mousePosition(c).y;  
  l=b.offsetLeft;  
  t=b.offsetTop;  
  addEvt(b,'mouseup',function(){i=false});  
  addEvt(document,'mouseup',function(){i=false});  
  addEvt(document,'mousemove',function(a){  
  if(i){  
  mousePosition(a,'p');  
  b.style.left=l+mousePosition(a).x-x+'px';  
  b.style.top=t+mousePosition(a).y-y+'px'  
  }  
  })  
  }  
function mousePosition(event,i){  
  var d,x,y,t,b;  
  d=document;  
  b=/*@cc_on!@*/false;  
  e=b?window.event:event;  
  if(i){b?e.returnValue=false:e.preventDefault()}  
  x=(b?d.documentElement.scrollTop:d.body.scrollTop)+e.clientX;  
  y=(b?d.documentElement.scrollLeft:d.body.scrollLeft)+e.clientY;  
  t=b?e.srcElement:e.target;  
  return{x:x,y:y,t:t}  
  }  
function addEvt(a,b,i){  
  if(a.addEventListener){a.addEventListener(b,i,false)}else  
  if(a.attachEvent){a.attachEvent('on'+b,i)}else  
  {a['on'+b]=i}  
}  
</script>

А вот и код,отвечающий,что мы должны перетаскивать:
<div style="position:absolute;" class="dragable"><a href="http://rucoz.com">Перенеси меня</a></div>
Просмотров: 794 | Комментариев: 9 | Опубликовал: DizeL | Дата: 16.11.2010

 14.12.2009   

 

 Соц. Закладки+ бону... 

 02.12.2009   

 

 Форма добавления ко... 

 23.01.2009   

 

 Изменения В Протоко... 

 06.11.2009   

 

 Регистрация после п... 

 08.11.2009   

 

 Смотрим то что скры... 


Всего комментариев: 9
 
+1 8 midlersen 13.12.2010 19:47:20 у меня не работало пока я не постатил
Code
<script language="javascript" type="text/javascript">
в самом начале за место
Code
<script>  
Цитировать | Редактировать | Удалить
 

 
  0 9 DizeL 13.12.2010 20:33:55 Теперь то работает надеюсь :) Цитировать | Редактировать | Удалить
 

 
+1 6 Malish 23.11.2010 18:09:49 DizeL а можно такое с блоками сотворить,но только на куках чтобы сохранилось? ^_^ Цитировать | Редактировать | Удалить
 

 
+1 7 DizeL 23.11.2010 21:10:30 Блок заключи в <div style="position:absolute;" class="dragable">ыыы</div> Цитировать | Редактировать | Удалить
 

 
  0 5 kshlkv 18.11.2010 15:20:19 На свой сайт поставил и прикололся над другом :D Цитировать | Редактировать | Удалить
 

 
  0 3 GhoST 17.11.2010 17:57:12 rolk не тебе советы давать getlost Цитировать | Редактировать | Удалить
 

 
-1 2 rolk 17.11.2010 17:38:28 не тебе решать.) Цитировать | Редактировать | Удалить
 

 
+2 1 Plan 17.11.2010 16:42:03 ненужная вещь Цитировать | Редактировать | Удалить
 

 
+1 4 DizeL 17.11.2010 19:05:16 Необязательно ставить текст, можно поставить блок. Цитировать | Редактировать | Удалить
 

3aKa4Ka.at.ua - портал веб мастеров

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.