Главная » 2010 » Июль » 25 » Перемещение блоков (drag & drop) (Javascript)
25.07.2010, 09:56

Перемещение блоков (drag & drop)





Drag & drop, что с английского означает "тяни и бросай" - способ, с помощью которого элементы можно перетаскивать мышкой по экрану. Реализуется всё это дело достаточно просто, но всё равно возникает определенное количество подводных камней, в основном с кроссбраузерностью...
Перед вами полностью универсальный скрипт по перетаскиванию мышкой любых объектов с абсолютным позиционированием и присвоенным классом "dragable", причем класс этот можно присваивать динамически, то есть присваиваете класс - объект перетаскивается, убираете - встает как вкопанный. Скрипт проверен и корректно работает в следующих браузерах: IE 5.5 (Да! и там тоже!), IE 6, IE 7, IE 8, Safari 4, Opera 9, Mozilla 3, Chrome.

Сначала поместите в самый низ страницы данный скрипт:

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>

Для того чтобы нужный объект можно было перетаскивать, присвойте ему position:absolute; и класс dragable, например так:

Code
<div style="position:absolute;" class="dragable">Перенеси меня!</div>
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://studioad.ru
Категория: JavaScript's | Просмотров: 4339 | Добавил: 7soft | Рейтинг: 4.0/6 |
Теги: блоков, (drag, drop), перемещение
Всего комментариев: 4
0  
1 sold93 -Infoscript Team-  (15.08.2011 15:11) [Материал]
Аватар пользователя
а положение элементов сохраняется?

0  
2 AleX_X   (17.10.2011 18:17) [Материал]
Аватар пользователя
нет

0  
3 koter   (05.04.2012 07:24) [Материал]
Аватар пользователя
Класс smile а можно обычного текста, перемещать картинку? что нужно изменить? я попробовал поставить, но у меня картинка стоит на месте и ни куда перетаскиваться не хочет.

0  
4 frenkmalcov   (05.04.2012 18:28) [Материал]
Аватар пользователя
Цитирую sold93: а положение элементов сохраняется?
наверно если cookie добавить, то будет возможность сохранения

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]