VPF::эффект перетаскивания объекта

Innuendo

Дата 13.2.2006, 20:58 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

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

Alx, а можно вопрос? частью какой программы является эти квадратики? просто интересно smile

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

12345c

Дата 13.2.2006, 20:58 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

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

Ну да, никто из нас америк не открывает - предлагаю свой код для развития, потому что он кажется компактным и удобным (писал его примерно год назад для проекта с тасканием слоёв). Всё равно над многим здесь ещё работать. А чтобы всё было проработано и выложено в виде статьи, я тоже не встречал.

Цитата

частью какой программы является эти квадратики

да-да, у Нетскейпа на сайте видел подозрительно похожие. Где копирайт?

Это сообщение отредактировал(а) 12345c - 13.2.2006, 21:01

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Alx

Дата 13.2.2006, 21:00 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

только в эксплорере выделяется содержимое дивов.
я добали в свой скрипт захват в точке вот так:

Цитата(Alx @ 13.2.2006, 20:19

)

можно, ессно вычесть из координат курсора координаты объекта и всё ок)

Добавлено @ 21:05

Цитата(Innuendo @ 13.2.2006, 20:58

)

Alx, а можно вопрос? частью какой программы является эти квадратики? просто интересно

в смысле, не понял? smile

12345c,
а, так это твой код?
Добавлено @ 21:06

Цитата(12345c @ 13.2.2006, 20:58

)

да-да, у Нетскейпа на сайте видел подозрительно похожие. Где копирайт?

вы шутите, да? smile

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

12345c

Дата 13.2.2006, 21:06 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

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

Цитата(Alx @ 13.2.2006, 21:00

)

можно, ессно вычесть из координат курсора координаты объекта и всё ок)

Неудобно, потому что если объекты многократно вложены (в таблицы), то придётся делать цикл рекурсии по всем offsetParent, суммировать координаты обрамляющих слоёв. Правда , для absolute это может и не требоваться ...

Код мой, на http://burime.org.ru/test1/karta2/ посмотри, как это всё с запретами драга и селекта работает. Там, сначала можешь таскать подсказки, а если выделишь чекбокс "Редактировать карту", то сможешь таскать и картинки.

Цитата(Alx @ 13.2.2006, 21:10

)

и в том скрипте, который ты выложил, так и делается...)

нет, в моём за начало берётся не разница ,а координаты мыши в момент клика. Но всё не важно. Давайте закончим флудить, надоело тратить время на такую ерунду, как общение smile

Будут серьёзные результаты - выкладываем.

Это сообщение отредактировал(а) 12345c - 13.2.2006, 21:16

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Alx

Дата 13.2.2006, 21:10 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

12345c,
хех... абсолютно позиционированные, они и есть абсолютно позиционированные... у них нет родителей...а относительно позиционированных ты бы не передвинул ;)

и в том скрипте, который ты выложил, так и делается...)
Добавлено @ 21:11
не пойму, как там реализовано, что в лисе не слетают дивы? smile

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

Innuendo

Дата 13.2.2006, 21:32 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

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

Цитата(Alx @ 13.2.2006, 21:00

)

в смысле, не понял? smile smile

ну ты так изначально и хотел чтоб просто квадратики двигать? или это к примеру игра, и там нужен такой скрипт smile

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

Alx

Дата 13.2.2006, 21:33 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

ну всё, у мя терь тож хватает где надо) щас буду думать как сделать, чтоб не слетало при rollover`е.
Добавлено @ 21:35
Innuendo,
ну ты Шерлок Холмс smile

да, я собирался попытаться летом написать футбольный менеджер на PHP+JS, а это должна была быть функция расположения игроков на поле)

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

Innuendo

Дата 13.2.2006, 22:15 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

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

Цитата(Alx @ 13.2.2006, 21:33

)

Innuendo,
ну ты Шерлок Холмс smile
да, я собирался попытаться летом написать футбольный менеджер на PHP+JS, а это должна была быть функция расположения игроков на поле)

Успехов!
мне бы скорее эту курсовую с этими матрицами сдать smile

за чё-нить да возьмусь smile

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

Alx

Дата 13.2.2006, 23:02 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

... и ещё теперь они во всех браузерах никогда не спадают с курсора с какой скоростью не мотать и везде, кроме Оперы запрещено выделение.

вот тут "последний релиз" smile

в принципе, надо ещё сделать чтобы
- в опере не выделялось
- проход по родительским элементам на предмен нахождения className == "drag_obj", если внутри дива есть ещё элементы
- ну и как я говорил, совсем для понтов, можно сделать, чтобы всё это можно было вначале мышкой веделять, а потом выделение передвигать smile

Добавлено @ 23:08

Код


<style>
.drag_obj{position:absolute;border:1px solid #333333;-moz-user-select:none;}
</style>
<script>

 e_source = '(window.navigator.userAgent.indexOf("Gecko") != -1) ? e.target : window.event.srcElement;';
 is_moving = "false";
 posX = 0;
 posY = 0;
 zMax = 0;

 document.onmousemove=moveObj
 document.onmousedown=takeObj;
 document.onmouseup=function(){window.is_moving = "false";}
 document.ondragstart=function(){window.event.returnValue = false;}
 document.onselectstart=function(){if(window.event.srcElement.className == "drag_obj") window.event.returnValue = false;}

function moveObj(e)
{    if (window.is_moving != "false")
    {    var obj = document.getElementById(window.is_moving);
        var _left = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.pageX : window.event.x + document.body.scrollLeft;
        var _top = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.pageY : window.event.y + document.body.scrollTop;

        obj.style.left = _left - window.posX;
        obj.style.top = _top - window.posY;
    }
}

function takeObj(e)
{    var obj = eval(e_source);
    if (obj.className == "drag_obj")
    {    window.posX = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.pageX-parseInt(obj.style.left) : window.event.x-parseInt(obj.style.left) + document.body.scrollLeft;
        window.posY = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.pageY-parseInt(obj.style.top) : window.event.y-parseInt(obj.style.top) + document.body.scrollTop;

        window.is_moving = obj.id;
        window.zMax++;
        obj.style.zIndex = window.zMax;
    }
}

</script>

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

Innuendo

Дата 13.2.2006, 23:29 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

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

круто!
теперь даже при скоростном движение они успевают.
А как ты сделал в мозилле, чтоб не выделялось?

в общем классно smile

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

12345c

Дата 14.2.2006, 04:00 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

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

Да, загадка - мой код срывает перемещение в ie, а твой нет. Всматривался, менял - ничего не помогает. Подменил генерацию кодом - то же самое. Наконец, увидел - у тебя же не берёт функция при onmousemove значение obj.style.left - доступа в DOM лишний раз не идёт, а он у меня рушит "удержание" объекта под мышью, получается. (В ie-opera).

И не только, проблемы решились после невыбора каждый раз в onmousemove объекта event.srcElement. Ну и ну. Не зря потраченный вечер.

Alx, Придётся и тебе "+" выдать - за плодотворную совместную работу и отвагу на пожаре.

Кстати, у тебя маленькая ошибочка - надо zMax=1; , а не 0, иначе первый drag не срабатывает как следует.

Мой вариант кода (не люблю тавтологий и бессмыслиц типа "window."):

Код


<style>.drag{position:absolute;width:150;height:100;font-size:24;padding:4;border:2px solid darkred;}</style>
<script>d=document;g=function(a){return d.getElementById(a);}
FF=navigator.appName=="Netscape"; /*isGecko*/
    zMax=7;mouseDown=0;    //установки скрипта
    var posY,posX;    //переменные скрипта
for(i=0;i<zMax;i++)d.write('<div id=drag'+i+' class=drag>'+i+'</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.onmousedown=function(e){
    if((t=FF?e.target:event.srcElement).className!="drag")return;    //отсечка лишнего
    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;
}
d.onmouseup=function(e){mouseDown=0;}
d.ondragstart=d.onselectstart=function(){if(event.srcElement.className=="drag")event.returnValue=!1;}
</script>

И его инкарнация - http://js2.ru/example/JsPrimeryCode-56.htm .

-

Цитата

проход по родительским элементам на предмен нахождения className

- причём по parentNode, а не по offsetParent, последняя не всё берёт.

Цитата

а потом выделение передвигать

- слой, в котором выделение? Или слои? Интересно. А если просто текст, то это другая задача, для редактирования.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 18:11

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Alx

Дата 19.2.2006, 00:48 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

ну блин, пока руки не доходят, вот что пока сделал:

http://soft.flyweb.in/small/JsDragObjs/example.html
Добавлено @ 00:51
только в Файрфоксе почему-то возникает событие ondrag, не знаю как его заблочить...

Это сообщение отредактировал(а) Alx - 19.2.2006, 00:49

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

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