Главная » 2012 » Март » 17 » JavaScript's: Перемещение блоков (drag & drop)
22:47 JavaScript's: Перемещение блоков (drag & drop) | ||||||||||||
Перемещение блоков (drag & drop)Советуем посмотреть: src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  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
| ||||||||||||