Drag and drop на коленке
javascript, 05.06.2009 Пятница, 02:12
Теги:
Теги:
Я не мог не написать про одну из самых простых и в то же время полезных фишек клиентского скриптинга. Это drag & drop, что с буржуйского означает "тяни и бросай" - способ, с помощью которого элементы можно перетаскивать мышкой по экрану. Реализуется всё это дело достаточно просто, но всё равно возникает определенное количество подводных камней, в основном с кроссбраузерностью..
Моя заготовка - полностью универсальный скрипт по перетаскиванию мышкой любых объектов с абсолютным позиционированием и присвоенным классом "dragable", причем класс этот можно присваивать динамически, то есть присваиваете класс - объект перетаскивается, убираете - встает как вкопанный. Скрипт проверен и корректно работает в следующих браузерах: IE 5.5 (Да! и там тоже!), IE 6, IE 7, IE 8, Safari 4, Opera 9, Mozilla 3, Chrome.
Вот пример работы скрипта. Просто подвигайте блок мышкой: А вот текст скрипта. Для того чтобы нужный объект можно было перетаскивать, присвойте ему position:absolute; и класс dragable. Затем поместите в самый низ страницы данный скрипт: Внемлю предложениям и пожеланиям. Спасибо за чтение.
Моя заготовка - полностью универсальный скрипт по перетаскиванию мышкой любых объектов с абсолютным позиционированием и присвоенным классом "dragable", причем класс этот можно присваивать динамически, то есть присваиваете класс - объект перетаскивается, убираете - встает как вкопанный. Скрипт проверен и корректно работает в следующих браузерах: IE 5.5 (Да! и там тоже!), IE 6, IE 7, IE 8, Safari 4, Opera 9, Mozilla 3, Chrome.
Вот пример работы скрипта. Просто подвигайте блок мышкой: А вот текст скрипта. Для того чтобы нужный объект можно было перетаскивать, присвойте ему position:absolute; и класс dragable. Затем поместите в самый низ страницы данный скрипт:
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>
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>
№2
Aleko
[sayto]Georgemus[/sayto], всё очень просто делается через куки, как уже было подмечено в первом комментарии.
№1
Aleko
[sayto]MegaFill[/sayto], не понял суть твоего вопроса.