Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Drag & Drop не могу разобраться


Автор: GF 17.11.2006, 16:04
Никогда не нужно было решать задачи с Драг энд Дропом, а тут вдруг пришлось. Не могу сделать примитивнейшую прогу- чтоб можно было перетаскивать картинку по горизонтали. Вот код:
Код

<html>
<head>
<script language="JavaScript">
var obj;

function mousedown(ev) {
  obj =document.getElementById('a');
}

function mouseup() {
 obj = null;
}

function mousemove(e) {
  if (obj){
     e = e || window.event;
     if (navigator.userAgent.indexOf('Opera')>=0)
        document.getElementById('a').style.left = e.clientX -50
     else
        document.getElementById('a').style.left = e.clientX-50                                                  
   }
}

document.onmousemove = mousemove;
document.onmouseup = mouseup;
</script>
</head>
<body>
      <img src="gallery\img1.jpg" id="a" style="position: absolute;" onmousedown = "mousedown()" ondrag="mousemove()" ondragend="mouseup()">
</body>
</html>


В таком некрасиво-чудовищном виде она работает в Opera и IE, но болеет в FF  smile 
Кто может исправить код так, чтоб она нормально работала везде? Ещё хотелось бы, чтоб в IE и FF при перетаскивании курсор имел бы тот же вид. Может кто предложит более красивый вариант без такого количества обработчиков событий???  

Автор: 12345c 17.11.2006, 16:59
Нет, с количеством событий всё правильно. smile Совместимость - сравните с примером http://js2.ru/example/JsPrimeryCode-56.htm , найдите различия. Он, кстати, на форуме где-то здесь обсуждался.

Автор: AKS 17.11.2006, 20:34
GF, 
Код

e.clientX - 50 + 'px';

Автор: SelenIT 18.11.2006, 01:53
12345c, можно задать несколько вопросов по Вашему примеру по ссылке?
1. Обязательна ли проверка navigator.appName? Я попробовал заменить во всех условиях "FF" на "e" - работает (IE6, FF2, Opera 8-9), да и имхо логичнее пускать Оперу по W3C-шной ветке, чем по IE-шной... Где я упустил что-то важное?
2. Верно ли я понимаю, что ondragstart актуален только для IE и только в том случае, когда перетягиваемыми объектами являются ссылки, а для обычных элементов (тех же div-ов) его можно смело опускать?
3. onselectstart, по-видимому, тоже работает только в IE - так ли это? Для Мозиллы и Сафари, насколько мне известно, того же эффекта можно добиться из CSS: (-moz-,-khtml-)user-select: none (аналога для Оперы я, к сожалению, не нашел)...

Кстати, при экспериментах с перетягиваением ссылок в FF2 обнаружилась небольшая странность с этими стилями - с ними перетягивание ссылок не работает (симптомы - курсор в виде запрещающего знака, mousemove начинает работать только после отпускания кнопки - похоже, что mouseup игнорируется). Без этих стилей и ссылки нормально перетягиваются. А в IE примерно то же наблюдается со ссылками, если убрать ondragstart (с дивами этого не происходит - на них ondragstart не влияет...).

Те же симптомы наблюдались у меня в примере GF после того, как объект "перескакивал" в момент захвата к -50px от курсора. Интересно, что за событие происходит в FF в момент первого движения курсора по объекту или объекта под курсором, которое приводит к таким артефактам, но не ловится обработчиками?

Автор: AKS 18.11.2006, 11:28
SelenIT, 
Цитата

mousemove начинает работать только после отпускания кнопки

Попробуйте добавить в обработчики mousedown/mousemove вот это: e.preventDefault()...

Автор: SelenIT 18.11.2006, 14:24
AKS, спасибо, с preventDefault() в onmousedown в FF ссылки стали тягаться и при запрете выделения через CSS. В IE тоже хватило "заглушить" с помощью returnValue=!1 однин обработчик, но уже как раз onmousemove smile.

Так что же, делаем вывод - ondragstart и т.п. вообще "не при делах"?

Автор: 12345c 18.11.2006, 15:11
1. в данном случае равнозначно
2. да
3. да
4. как правильно указал AKS, отмена "dragstart" (которого нет) для Gecko - это e.preventDefault в onmousedown.

Спасибо за инициирование доработки, в улучшенном для FF виде скрипт таскания слоёв с картинками и ссылками выглядит так (для Оперы способа отмены выделения не нашлось):
Код
<b>Таскание объектов мышью по окну.</b>

<style>.drag{position:absolute;width:150;height:100;font-size:24;padding:4;border:2px solid darkred;}
.dragA{-moz-user-select:none}</style>
<script>d=document;g=function(a){return d.getElementById(a);}
FF=!d.all; /*isGecko; можно FF=!d.all||self.opera; */
  zMax=7;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.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"){
  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>
В этом скрипте, если мы хотим перетаскивать слои, берясь за вложенные объекты, у всех них должен быть класс dragA, даже у <b></b> и прочих, и усложнена процедура поиска корневого слоя вместо строки if(t.className=="dragA")t=t.parentNode; . Но это уже задача применяющего пример к практике, а в примере показаны самые необходимые механизмы. Пример на http://js2.ru/example/JsPrimeryCode-56.htm обновил.

Тема, в которой был создан исходный скрипт: http://forum.vingrad.ru/topic-83470/hl/d.ondragstart/d.onselectstar/index.html - " эффект перетаскивания объекта", Alx

Цитата(SelenIT @  18.11.2006,  14:24 Найти цитируемый пост)
Так что же, делаем вывод - ondragstart и т.п. вообще "не при делах"? 
С ним наиболее кратко пишется отмена таскания в IE. Вот попробовал if(FF)e.preventDefault();else event.returnValue=!1; в 16-й строчке, убрав ondragstart,
так IE не захотел отпускать слой после этого, если схватиться за ссылку.

И тут ещё понадобится дополнение, раз взялись за ссылки. После перетаскивания и отпускания, отрабатывается переход (onclick).

Дополнение: вот, обновил скрипт, добавив самый грубый контроль за кликами: переменную wasDrag. Если хотя бы на 1 пиксель сдвинется мышь при клике, будет сдвиг слоя, но не переход, иначе переход. Мягче нужно сделать так, чтобы прослеживался сдвиг не более чем на 3-4 пикс., как сделано во встроенном механизме Windows, и делать переход, если суммарный сдвиг по координатам был не более 3-4.

Автор: SelenIT 18.11.2006, 15:56
12345c, спасибо за ответы!
А вот результат моих изменений того же скрипта:
Код

<style>
.aTb{border-bottom:1px solid}
.aTb a{color:#903;text-decoration:none;font-size:12px}
body{margin:0 0 88px 6px;padding:0;font-family:Verdana,Arial,Helvetica,sans-serif}
.drag{position:absolute;width:150;height:100;font-size:24;padding:4;border:2px solid darkred;
   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none;
   cursor: default;
}
</style>
<script>
d=document; g=function(a){return d.getElementById(a);}
zMax=7;mouseDown=0;    //установки скрипта
var posY,posX;    //переменные скрипта

//--генерируем слои
for(i=0;i<zMax;i++){
    tag = i%2 ? 'div' : 'a';
    d.write('<'+tag+' id=drag'+i+' class=drag href=# onclick="return false">'+i+'</'+tag+'>');
}
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=e?e.target:event.srcElement).className!="drag")return;    //отсечка лишнего
    posY=(e?e.pageY:event.y+d.body.scrollTop)-parseInt(t.style.top);
    posX=(e?e.pageX:event.x+d.body.scrollLeft)-parseInt(t.style.left); //начальная точка захвата
    t.style.zIndex=zMax++;        //подъём слоя над другими
    mouseDown=t;
    if(e)e.preventDefault(); // без этой строчки ломается драггинг ссылок в FF
}

d.onmousemove=function eMove(e){if(!mouseDown)return;
    mouseDown.style.top=(e?e.pageY:event.y+d.body.scrollTop)-posY+'px';
    mouseDown.style.left=(e?e.pageX:event.x+d.body.scrollLeft)-posX+'px';
    if(!e)event.returnValue=!1;  // без этой строчки ломается драггинг ссылок в IE
}

d.onmouseup=function(e){ mouseDown=0;}

d.onselectstart=function(){if(event.srcElement.className=="drag")event.returnValue=!1;}
</script>

Если "закомментарить" строчки 35 или 41, в каком-то браузере начинаются проблемы со ссылками, но с дивами по-прежнему все ОК.

P.S. Виноват, не дочитал добавление. Все-таки насчет ondragstart-а: у меня получилось, что аналогичный эффект в IE дает event.returnValue=!1 в onmousemove (как предложил AKS). В чем подводные камни?

Автор: 12345c 18.11.2006, 16:20
Цитата(SelenIT @  18.11.2006,  15:56 Найти цитируемый пост)
Все-таки насчет ondragstart-а: у меня получилось, что аналогичный эффект в IE дает event.returnValue=!1 в onmousemove (как предложил AKS). В чем подводные камни?
Попробовал снова убрать ondragstart, добавив и в onmousemove , и в onmousedown строки if(FF)e.preventDefault();else event.returnValue=!1; . В IE стало корректно работать (можно, понятно, в onmousemove ограничиться if(!FF)event.returnValue=!1; ). Недостатков не вижу, в другие окна ссылки тоже не перетаскиваются, как и при отмене по ondragstart. Поэтому ради краткости я бы остановился на d.ondragstart=d.onselectstart=... вместо этих 2 строк. Хотя с точки зрения полноты контроля за мышью лучше отменять действия по умолчанию, из соображений, что в будущих версиях неизвестно что туда повесят. Но так можно далеко зайти и регулярно утяжелять свои скрипты контролем за тем, чего нет и, может быть, не будет. smile

Автор: SelenIT 19.11.2006, 06:15
12345c, а почему все-таки нельзя заменить везде if(FF) на if(e) 
Цитата(12345c @  18.11.2006,  16:20 Найти цитируемый пост)
ради краткости
и вообще избавиться от определения браузера в каком-либо виде?

Кроме того, у меня сложилось мнение, что returnValue=!1; в mousemove отменяет в IE и drag, и select. Если так, то, по-моему, одна доп. строчка в onmousemove явно выглядит "аккуратнее" целых двух некроссбраузерных доп. обработчиков (тем более, что e.preventDefault(); из mousedown-а все равно ведь выкинуть нельзя) - даже по "количеству букв" вариант с ней короче. Да и концептуально мне оно кажется вернее - поскольку фактически drag'n'drop формируется тремя событиями, то и скрипт ограничивается тремя обработчиками, доведенными "до абсолюта"...

А проблема GF, с учетом полученных в топике знаний, похоже решается вообще просто:
Код

<script language="JavaScript">
var obj;
function mousedown(e) {
  obj =document.getElementById('a');
  if(e)e.preventDefault();
}
document.onmouseup = function() { obj = null; }
document.onmousemove = function(e) {
  if (obj){
     document.getElementById('a').style.left = (e || window.event).clientX-50+'px'
  }
}
</script>
<img src="gallery/img1.jpg" id="a" style="position: absolute;" onmousedown="mousedown(event)">


вдогонку...

12345c, кстати, код GF натолкнул меня на мысль, как можно еще чуточку компактизировать работу с координатами, в итоге все обработчики из первоначального варианта (без Ваших новых правок с проверкой сдвига курсора на ссылке и т.п.) сократились до следующего вида:
Код

d.onmousedown=function(e){
    var ev=e||event, t;
    if(!ev || (t=e?e.target:event.srcElement).className!="drag")return;
    posY=ev.clientY+d.body.scrollTop-parseInt(t.style.top);
    posX=ev.clientX+d.body.scrollLeft-parseInt(t.style.left);
    t.style.zIndex=zMax++;
    mouseDown=t;
    if(e)e.preventDefault(); // отменяет drag в FF и, вроде бы, select в Opera 9
}
d.onmousemove=function(e){
    var ev=e||event;
    if(!mouseDown || !ev)return;
    mouseDown.style.top=ev.clientY+d.body.scrollTop-posY+'px';
    mouseDown.style.left=ev.clientX+d.body.scrollLeft-posX+'px';
    if(!e)event.returnValue=!1;  // отменяет drag и, вроде бы, select в IE
}
d.onmouseup=function(e){ mouseDown=0;}

Полагаю, потеря совместимости с NN4 - не такая уж большая беда...

Автор: SelenIT 19.11.2006, 23:33
Осмелюсь предложить еще одну вариацию на тему, имхо так читается немного легче:
Код

<b>Таскание объектов мышью по окну.</b>
<style>.drag{position:absolute;width:150;height:100;font-size:24;padding:4;border:2px solid darkred;
-moz-user-select: none; -khtml-user-select: none; user-select: none; cursor: default;}</style>
<script>d=document;g=function(a){return d.getElementById(a);}
  var zMax=7;    //установки скрипта
  var dragObj, wasDrag, posY, posX;    //переменные скрипта
for(i=0;i<zMax;i++) d.write('<div id=drag'+i+' class=drag style="background:'+'brown,darkgreen,teal,maroon,steelblue'.split(',')[i%5]+'; '+
                           'top:'+40*(i+1)+'px; left:'+40*(i+1)+'px"><a href=#'+i+'>'+i+'</a></div>'); //генерируем слои

function draggable(e) { //поиск тягаемого объекта
   var o=e?e.target:event.srcElement;
   while(o) { if(o.className&&o.className.indexOf('drag')>-1)return o; o = o.parentNode; }
   return false;
}
function getX(e)  { return (e||window.event).clientX+d.body.scrollLeft } 
function getY(e)  { return (e||window.event).clientY+d.body.scrollTop } // определение коорд-т события
function block(e) { e?e.preventDefault():window.event.returnValue=false; } // отмена умолч. действия
d.onmousedown=function(e){ 
   var t=draggable(e); if(!t)return;
   posY=getY(e)-parseInt(t.style.top); 
   posX=getX(e)-parseInt(t.style.left);
   t.style.zIndex=zMax++;
   dragObj=t; block(e);
}
d.onmousemove=function(e){
   if(!dragObj)return;
   dragObj.style.top =getY(e)-posY+'px';
   dragObj.style.left=getX(e)-posX+'px';
   wasDrag=1; block(e);
}
d.onmouseup=function(){ dragObj=0; }
d.onclick=function(e){ if(wasDrag){ wasDrag=false; block(e); }}
</script>


Код обработчиков немного упростился за счет выноса дублирования во вспомогательные функции. Кстати, если это переделать на объектный лад и навешивать обработчики через attachEvent/addEventListener (следующий этап оптимизации;), можно по этому же attachEvent/addEventListener сделать проверку при объявлении этих функций, и вообще избавиться от следов браузерных проверок в рантайме (уже делаю;).

А вот с кликами обнаружилась неприятная (хоть и не критичная) вещь в Опере 8 - там onclick после сдвига курсора и сам не происходит, поэтому блокировка не сбрасывается и первый клик после отпускания тягаемой ссылки "по инерции" блокируется, срабатывает только второй. К счастью, в 9-й Опере все нормально, а 8-я стремительно теряет актуальность...

Автор: 12345c 19.11.2006, 23:56
Да, в 7.54 так же со ссылками (насколько проще без них было smile ), надо будет доработать.
Код смотрится действительно лучше. Когда возьмусь доделывать Оперу, учту smile.
Оперы довольно крепко сидят у юзеров, в отличие от FF, по статистике посещений. Поэтому год-два их надо поддерживать. Оперы-7, например, имеют 0.5% от общего кол-ва, а все Оперы вместе - порядка 11%, а 8-я - около 3%. Это довольно много для старых версий. Ещё полгода назад с 6-й ходили.

Автор: SelenIT 20.11.2006, 00:26
Все же я считаю проблему старых Опер некритичной, тут же не полная потеря функциональности, а лишь мелкое неудобство (подумаешь, лишний клик). И переход с 8-й на 9-ю, по моим наблюдениям за http://gs.spylog.ru/r/?dayFrom=1&monthFrom=1&yearFrom=2006&dayFor=20&monthFor=11&yearFor=2006&ltType=3&radioReportOption=visitors&browser_name=Opera&browser_version=__top__&x=19&y=19&graphCurve0=Microsoft%2BInternet%2BExplorer%2B6&graphCurve1=FireFox%2B1&graphCurve2=Microsoft%2BInternet%2BExplorer%2B5&graphCurve3=Opera%2B8&graphCurve4=Opera%2B9&graphCurve5=Opera%2B7&graphCurve9=FireFox%2B2&graphCurvebrowser_name=__all__&graphCurvebrowser_version=__top__&ableSubmit=0&graphCurveNumbers=33&graphCurveCheckedNumbers=7&curvePerGraph=7&order=visitors&desc=1&inner=0&reportId=10&categoryId=1&representationType=graph, идет гораздо быстрее чем было между прошлыми версиями (как-никак системные требования те же, а возможности лучше в разы, причем все это бесплатно)...

...хотя что-то я притупил, по сути ведь вся доработка сведется к замене wasDrag=1 в onmousemove на что-то вроде
Код

if (!window.opera || parseInt(navigator.appVersion)>8) wasDrag=1;

Автор: GF 20.11.2006, 14:09
Всё, разобрался. За основу взял скрипт, предложенный SelenIT, выкинув из него ненужные мне вещи. всем спасибо за помощь!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)