Перемещение блоков (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>


Источник: http://isucoz.ru/uploads/posts/2010-10/1287844649_53737472.gif
Категория: Разное | Добавил: Admin (24.10.2010) | Автор: isucoz.ru
Просмотров: 379 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]