Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> эффект перетаскивания объекта, drag, чё-то не пойму... 
V
    Опции темы
Innuendo
Дата 13.2.2006, 00:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



12345c,
ну я просто нажал на ссылку в сообщении Alx'a.. FireFox 1.5.0... заработало smile


--------------------
=)
PM MAIL ICQ Jabber   Вверх
12345c
Дата 13.2.2006, 02:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

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



А, понятно. Я-то приведённый код смотрел.


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Alx
Дата 13.2.2006, 07:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


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

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



вот этот код работает абсолютно замечательно, во всех браузерах smile

Код

<html>
<head>
<title>Преретаскивание элементов</title>
<style>
.drag_div{position:absolute;}
</style>
<script>

function moveObj(e,obj)
{    var _left = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.pageX : e.x;
    var _top = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.pageY : e.y;

    if (obj.getAttribute("is_moving") == "true")
    {    obj.style.left = _left - parseInt(obj.style.width) / 2;
        obj.style.top = _top - parseInt(obj.style.height) / 2;
    }
}

function takeObj(obj)
{    obj.setAttribute("is_moving","true");
    obj.style.setAttribute("zIndex","1");
}

function putObj(obj)
{    obj.setAttribute("is_moving","false");
    obj.style.setAttribute("zIndex","0");
}

</script>
</head>
<body id="tborder">
<div id="div1" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:purple;z-index:0;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
<div id="div2" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:#E18700;z-index:0;;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
<div id="div3" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:green;z-index:0;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
<div id="div4" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:red;z-index:0;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
<div id="div5" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:#6699cc;z-index:0;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
</p>
</body>
</html>


Цитата(12345c @ 12.2.2006, 23:55 Найти цитируемый пост)
Тут можно ещё гору критики

давай smile smile


--------------------
PM MAIL WWW ICQ   Вверх
12345c
Дата 13.2.2006, 14:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

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



О, вот стилей там не хватало., теперь работает (не везде, см. ниже).

Критика:
1) событий не навешаешься на объекты, если их много, лучше перехват событий на документе с анализом класса;
2) нет никакой надобности иметь признаки таскаемости при каждом объекте - мышь одна. Поэтому is_moving может быть переменной окна.
3) не соблюдён принцип поднимания затронутых слоёв - они возвращаются на своё место по уровню z-index. (Кстати, в FF, Opera он не срабатывает, из-за setAttribute, что ли, или строку присваиваешь вместо числа.) Для соблюдения достаточно присваивать ему номер, на 1 больший, чем имеется, и оставлять такой(переменная zMax).
4) совершенно забыл, что позиция мыши в ie не e.pageX, а e.pageX+document.body.scrollLeft .


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Alx
Дата 13.2.2006, 15:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


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

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



12345c,
мдя, в принципе, согласен, сейчас подправлю smile
кроме третьего, зачем ставить перетаскиваемый объект выше других? и потом, если z-index будет всё время расти, это тоже совсем не красиво.

я наконец-то понял, вначале ты имел ввиду:
Цитата(12345c @ 12.2.2006, 23:55 Найти цитируемый пост)
результат получается всегда нецелый, а стили этого не понимают


> obj.style.left = parseInt( _left - parseInt(obj.style.width) / 2 );

Цитата(12345c @ 12.2.2006, 23:55 Найти цитируемый пост)
Как можно

obj.style.left = _left - parseInt(obj.style.width) / 2;

? (В left загонять width.)

а почему нельзя? smile
Добавлено @ 15:19
хех, а с чего ты взял, что стили не понимают дробных чисел? у меня width и height по 105, на 2 - дробное и никаких проблем. поэтому оставляем как было smile
Добавлено @ 15:22
Цитата(12345c @ 13.2.2006, 14:39 Найти цитируемый пост)
Кстати, в FF, Opera он не срабатывает, из-за setAttribute

да, правильно.
надо же, а почему?


--------------------
PM MAIL WWW ICQ   Вверх
12345c
Дата 13.2.2006, 16:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

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



Цитата(Alx @ 13.2.2006, 15:16 Найти цитируемый пост)
кроме третьего, зачем ставить перетаскиваемый объект выше других

по аналогиис Windows
Цитата(Alx @ 13.2.2006, 15:16 Найти цитируемый пост)
z-index будет всё время
на век юзера хватит

Цитата(Alx @ 13.2.2006, 15:16 Найти цитируемый пост)
parseInt(obj.style.width) / 2;

? (В left загонять width.)а почему нельзя?
можно, но не естественно смешивать разную природу. Хотя понятно, ты ищешь середину объекта.

Цитата(Alx @ 13.2.2006, 15:16 Найти цитируемый пост)
с чего ты взял, что стили не понимают дробных чисел
здесь понимают, я искал ошибку, когда не работал скрипт. А бордюры, насколько помню, нге понимают, или что-то ещё

Цитата(Alx @ 13.2.2006, 15:16 Найти цитируемый пост)
setAttribute
есть кривости понимания где-то . Проще по-естественному обращаться к атрибутам.



--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Alx
Дата 13.2.2006, 17:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


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

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



ну вот, готово)
http://soft.flyweb.in/small/drag.html

12345с + за критику smile

Код

<html>
<head>
<title>Преретаскивание элементов</title>
<style>
.drag_obj{position:absolute;border:1px solid #333333;}
</style>
<script>

 window.is_moving = "false";
 window.zMax = 0;

document.onmousemove=moveObj;
document.onmousedown=takeObj;
document.onmouseup=putObj;
document.onmouseout=putObj;
document.ondragstart=function(){window.event.returnValue = false;}

function moveObj(e)
{    var obj = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.target : window.event.srcElement;
    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;

    if (obj.className == "drag_obj" && window.is_moving == obj.id)
    {    obj.style.left = _left - parseInt(obj.style.width) / 2;
        obj.style.top = _top - parseInt(obj.style.height) / 2;
    }
}

function takeObj(e)
{    var obj = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.target : window.event.srcElement;

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

function putObj(e)
{    var obj = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.target : window.event.srcElement;

    window.is_moving = "false";
}

</script>
</head>
<body id="tborder">
<div id="drag1" class="drag_obj" style="background:purple;    top:130px;left:245px;width:70px;height:70px;z-index:0;"></div>
<div id="drag2" class="drag_obj" style="background:#E18700;    top:130px;left:135px;width:70px;height:70px;z-index:0;"></div>
<div id="drag3" class="drag_obj" style="background:yellow;    top:130px;left:25px;width:70px;height:70px;z-index:0;"></div>
<div id="drag4" class="drag_obj" style="background:green;    top:20px;left:245px;width:70px;height:70px;z-index:0;"></div>
<div id="drag5" class="drag_obj" style="background:red;        top:20px;left:135px;width:70px;height:70px;z-index:0;"></div>
<div id="drag6" class="drag_obj" style="background:#6699cc;    top:20px;left:25px;width:70px;height:70px;z-index:0;"></div>
</body>
</html>


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

только надо ли?

Это сообщение отредактировал(а) Alx - 13.2.2006, 20:51


--------------------
PM MAIL WWW ICQ   Вверх
Innuendo
Дата 13.2.2006, 19:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



в этом примере у объекта который выбираешь, меняется z-index получается... он становится верхним.
Но вот бывает иногда глюк.. застопыривается квадратик... Когда курсор каким-то образом захоит за грани квадрата при драге.. Ну это бывает при быстром драге, но и при медленном тоже.. когда проводишь через квадратик (поверх)


--------------------
=)
PM MAIL ICQ Jabber   Вверх
Alx
Дата 13.2.2006, 19:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


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

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



Цитата(Innuendo @ 13.2.2006, 19:03 Найти цитируемый пост)
в этом примере у объекта который выбираешь, меняется z-index получается... он становится верхним.

ну 12345c предложил, мне чё, жалко чтоль?)

Цитата(Innuendo @ 13.2.2006, 19:03 Найти цитируемый пост)
Когда курсор каким-то образом захоит за грани квадрата при драге.. Ну это бывает при быстром драге,

это не ко мне) а к разработчикам JavaScript. соображает он медленно, не успевает за курсором smile

Цитата(Innuendo @ 13.2.2006, 19:03 Найти цитируемый пост)
но и при медленном тоже.. когда проводишь через квадратик (поверх)

неправда smile серьёзно, думаю это совпадение)


--------------------
PM MAIL WWW ICQ   Вверх
Innuendo
Дата 13.2.2006, 19:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Alx,
Цитата(Alx @ 13.2.2006, 19:13 Найти цитируемый пост)

неправда smile серьёзно, думаю это совпадение)

нп, верю, верю smile
а про то что соображает долго.. может как-то сделать проверку, ну то есть отследить этот сбой, и чтоб квадратик догнал быстренько мышку (ну просто оказался под ней).



--------------------
=)
PM MAIL ICQ Jabber   Вверх
Alx
Дата 13.2.2006, 20:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


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

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



Innuendo,
ну да в принципе, повесить событие и на документ smile
щас попробуем smile


--------------------
PM MAIL WWW ICQ   Вверх
12345c
Дата 13.2.2006, 20:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

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



Цитата(Alx @ 13.2.2006, 19:13 Найти цитируемый пост)
ну 12345c предложил, мне чё
Это не из-за z-index, а из-за mouseout, которое часто не появляется при очень быстрых движениях. Я тоже этим серьёзно не занимался, а надо бы придумать, как восстанавливать mouseout, если оно пропущено. Это нужно и в меню, и везде. Идея - ловить mousemove вне объекта и обнаруживать случай, когда mousemove на объекте перескочило на mousemove вне объекта. Для одиночного квадрата это несложно, а общая задача - когда сложная страница. Очень был бы полезный антиглючный скрипт.

Да, плюсов пора и тебе подсыпать, скажи за что smile)

Цитата(Alx @ 13.2.2006, 17:19 Найти цитируемый пост)
позиционирование курсора не по центру, а на месте захвата
- примеров много по сети. Принцип такой, что запоминаешь позицию при нажатии, а потом отностельно её двигаешь. Сейчас напишу свой примерчик, сделанный с рабочего скрипта.



--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Alx
Дата 13.2.2006, 20:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


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

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



Цитата(12345c @ 13.2.2006, 20:08 Найти цитируемый пост)
- примеров много по сети. Принцип такой, что запоминаешь позицию при нажатии, а потом отностельно её двигаешь. Сейчас напишу свой примерчик, сделанный с рабочего скрипта.

дык а есть свойство, которое возвращает координату мышь относительно ноды? в ИЕ вроде нет.
можно, ессно вычесть из координат курсора координаты объекта и всё ок)

Цитата(12345c @ 13.2.2006, 20:08 Найти цитируемый пост)
Да, плюсов пора и тебе подсыпать, скажи за что )

ну не знаю) тебе видней)
Добавлено @ 20:21
Цитата(12345c @ 13.2.2006, 20:08 Найти цитируемый пост)
Я тоже этим серьёзно не занимался, а надо бы придумать, как восстанавливать mouseout, если оно пропущено. Это нужно и в меню, и везде. Идея - ловить mousemove вне объекта и обнаруживать случай, когда mousemove на объекте перескочило на mousemove вне объекта. Для одиночного квадрата это несложно, а общая задача - когда сложная страница. Очень был бы полезный антиглючный скрипт.

а можно конкретней, какие ещё могут быть траблы кроме drag-n-drop?
вот ты в меню говорил, конкретно, в какой момент?


--------------------
PM MAIL WWW ICQ   Вверх
12345c
Дата 13.2.2006, 20:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

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



Цитата(Alx @ 13.2.2006, 20:19 Найти цитируемый пост)
вот ты в меню говорил, конкретно, в какой момент
то же самое - меню, которое должно закрываться при уходе мыши. Двигаешь мышь очень быстро - меню остаётся открытым.

Вот код, таким обычно пользуются (кроссбраузерный), но в нём ещё много недостатков. Можем поработать над ними не спеша.
(Что интересно, проблема срыва mouseout в FF решена - как ни двигай, не сорвёшь нажатую мышь с объекта.)
Код
<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*/    Ev='if(!e)e=event;';
    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){eval(Ev);
    if((t=FF?e.target:e.srcElement).className!="drag")return;    //отсечка лишнего
    posY=FF?e.pageY:e.y+d.body.scrollTop;
    posX=FF?e.pageX:e.x+d.body.scrollLeft;    //та самая начальная точка захвата
    t.style.zIndex=zMax++;        //подъём слоя над другими
    mouseDown=1;
}
d.onmousemove=function eMove(e){eval(Ev);
    if((t=FF?e.target:e.srcElement).className!="drag")return;
    if(mouseDown){t.style.top=parseInt(t.style.top)-(posY-(posY=FF?e.pageY:e.y+d.body.scrollTop));
        t.style.left=parseInt(t.style.left)-(posX-(posX=FF?e.pageX:e.x+d.body.scrollLeft));}
}
d.onmouseup=function(e){mouseDown=0;}
</script>

Недостатки:
*) запретить в Опере onSelect при таскании;
*) запретить onDragStart (если будет рисунок/ссылка в таскаемом поле);
*) потеря mouseout в ie,opera;
*) не использовать target (если будет наполнение объекта, его не схватишь за фон);
Список можно и нужно продолжить.

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


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Alx
Дата 13.2.2006, 20:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


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

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



12345c
ну ты меня извини, но это почти точная копия моего кода smile


--------------------
PM MAIL WWW ICQ   Вверх
Страницы: (3) Все 1 [2] 3 
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1128 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.