VPF::Перемещение объектов, слоев - Форум программистов

rita

Дата 7.6.2008, 20:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 7.6.2008

Репутация: нет
Всего: нет

Вечера доброго..

Есть код:

Код


<body>

<b>Таскание объектов мышью по окну.</b>

<style>
.drag {
    position:absolute;
    width:150;
    height:100;
    font-size:24;
    padding:4;
    border:2px solid darkred;
}
.area {
    position: absolute;
    width: 200;
    height: 400;
    font-size: 10;
    padding: 4;
    border: 5px solid darked;
}
.dragA {
    -moz-user-select:none;
    user-select: none;
}
</style>

<script>
d=document;
g=function(a) { 
    return d.getElementById(a);
    }
FF=!d.all; /*isGecko; можно FF=!d.all||self.opera; */
zMax=5;
mouseDown=wasDrag=0;    //установки скрипта
var posY,posX;    //переменные скрипта
//for(i=0;i<zMax;i++)
//d.write('<div id=drag'+i+' class=drag><a href=#'+i+' class=dragA>'+i+'</a></div>');
//onload=function() {
//    for(i=0;i<zMax;i++) {
//        g('drag'+i).style.left=g('drag'+i).style.top=40*(i+1);
        //g('drag'+i).style.backgroundColor='brown,darkgreen,teal,maroon,steelblue'.split(',')[i%5];
//    }
//}
//--генерируем слои, (потому что каждый лень писать)

d.write('<div id=drag0 class=drag></div>');
g('drag0').style.left=g('drag0').style.top=40*1;

d.write('<div id=drag1 class=area></div>');
g('drag1').style.left=g('drag1').style.top=40*2;
g('drag1').style.backgroundColor='brown';



d.onmousedown=function(e) {
  if((t=FF?e.target:event.srcElement).className.substr(0,4)!="drag") return;    //отсечка лишнего
  if(FF)e.preventDefault();  //отмена "dragstart" для FF
  if(t.className=="dragA")t=t.parentNode; //выбор слоя для таскания
  posY=(FF?e.pageY:event.y+d.body.scrollTop)-parseInt(t.style.top);
  posX=(FF?e.pageX:event.x+d.body.scrollLeft)-parseInt(t.style.left);    //начальная точка захвата
  t.style.zIndex=zMax++;        //подъём слоя над другими
  mouseDown=t;
}

d.onmousemove=function eMove(e) {
    if(!mouseDown) return;
    mouseDown.style.top=(FF?e.pageY:event.y+d.body.scrollTop)-posY;
    mouseDown.style.left=(FF?e.pageX:event.x+d.body.scrollLeft)-posX;
    wasDrag=1;
}
d.onmouseup=function(e) {
    mouseDown=0;
    }
d.onclick=function(e) {
    if(((t=FF?e.target:event.srcElement).className=="dragA") || ((t=FF?e.target:event.srcElement).className=="dragA")) {
        if(wasDrag) {
            wasDrag=0;
            if(FF)e.preventDefault(); else event.returnValue=!1;
            }
        }
    }
d.ondragstart=d.onselectstart=function() { //отмена действий бр. для IE
  if(event.srcElement.className.substr(0,4)=="drag") event.returnValue=!1;
  }
</script>

Перемещать удается только объект drag =(
Подскажите-поможите плиз =]

SelenIT

Дата 8.6.2008, 16:45 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 7
Всего: 401

Цитата(rita @ 7.6.2008, 20:44

)

Перемещать удается только объект drag =(

Все правильно - в d.onmousedown стоит проверка на имя класса элемента (для "отсечки лишнего"). Чтобы проходили другие классы, нужно изменить условие. А то и вообще убрать эту строчку - тогда таскаться будет все, за что мышка зацепилась...

Кстати, скрипт, похоже, родом с Винграда;). Вот тут еще обсуждали его нюансы...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »