Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Реализация Drag&drop

Автор: ksicom 3.10.2005, 11:29

вот скрипт:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>


<script language="javascript">
<!--
  var mouseX       = 0;
  var mouseY       = 0;
  var Xcur = 0;
  var Ycur = 0;
  var Xold = 0;
  var Yold = 0;

  
  function getMouseXY(e) {
    mouseX = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
    mouseY = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
  }
;

  function StopXY(){
  Xold = mouseX;
  Yold = mouseY;
  };


  function Ris2(){

    Xlast = mouseX;
    Ylast = mouseY;
    Xcur = Xcur + (Xold - Xlast)/1;
    Ycur = Ycur + (Yold - Ylast)/1;
    s = "../create_image.php?X1=" + Xcur + "&Y1=" + Ycur + "&X2=" + (Xcur+100) + "&Y2=" + (Ycur+100) +"&WIDTH=100&HEIGHT=100";
    document.getElementById("img1").src = s;
    document.getElementById("tab1").style.left = Xcur;
    document.getElementById("tab1").style.top = Ycur;
    };
//-->
</script>


</head>
<body>

<script type="text/javascript">
<!--
// initialization
document.onmousemove = getMouseXY;
//-->
</script>


<div id="Layer1" style="position:absolute; left:20px; top:140px; 
            width:500px; height:500px; z-index:1; 
        background-color: #00FF00; 
        layer-background-color: #00FF00; 
        border: 1px none #000000;"
        >

<table id="tab1" border="2"
style="position:absolute; left:50px; top:50px;">
<tr>
<td>
<IMG id="img1" src="../create_image.php?X1=0&Y1=0&X2=100&Y2=100&WIDTH=100&HEIGHT=100">
</td>
</tr>
</table>
</div>

<div id="Layer2" style="position:absolute; left:20px; top:140px; 
            width:500px; height:500px; z-index:2; 
        background-color: transparent; 
        layer-background-color: transparent; 
        border: 1px none #000000;"
            onmousedown =" StopXY();"
            onmouseup =" Ris2();">
</div>

</body>
</html>

В IE работает полностью, в FireFox частично.
Нужно чтобы и картинка менялась и таблица двигалась. В IE и то и то происходит, в FF только картинка меняется.
Что делать?

Если лень копировать, рабочая копия вот здесь:
http://ksicom.homeunix.net:8009/viewer/zzz6.html
Может тормозить, т. к. стрим
Двигать по чуть-чуть иначе картинка быстро уедет smile

Автор: Sardar 3.10.2005, 12:03

Тебе нужно это: http://forum.vingrad.ru/index.php?showtopic=58162&view=findpost&p=464276

Или я не понял задачи...

Автор: ksicom 3.10.2005, 12:27

Я не пойму, почему картинка меняется => в обработчик события входит нормально и картинку меняет нормально
а таблицу не двигает!
Причём только FF. Изредка, закономерность определить не удалось, таблица перепрыгивает с места на место.
IE таблицу двигает

Автор: Sardar 3.10.2005, 12:46

Вместе с X|Ycur добавь +"px", это обязательно. Также убедись что там не NaN. А вообще обьясни задачу лучше, ибо чую изврат это, ловить координаты на документе, затем рывками двигать таблицу... в ИЕ у меня она вообще за экран улетает...

Автор: ksicom 3.10.2005, 13:14

http://forum.vingrad.ru/index.php?showtopic=65852
ну собственно пытаюсь реализовать smile

думаю понятно, что сейчас бьюсь над прокруткой таблицы smile

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

Ура!!! Заработало после добавления "px"ов smile

Спасибо.

Автор: ksicom 4.10.2005, 17:09

очередная проблема с этим скриптом.
Не работает в IE6
Тот слой, на котором картинки вылезает перед слоем событий.
Как я понял - проблема давняя, но вот ответа на вопрос, как заставить работать в IE6 не нашёл.

Автор: Sardar 4.10.2005, 23:41

Выложи полный, самый свежий код. Возьми это за привычку на будущее.

Автор: ksicom 5.10.2005, 11:27

Вот последняя версия

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


<head>


<script language="javascript">
<!--
  var xOld = 0;
  var yOld = 0;


  function mdown(e) {
    var evt=window.event? window.event: e;
    document.getElementById("tab1").dragging=true;
    xOld=evt.clientX-document.getElementById("tab1").offsetLeft;
    yOld=evt.clientY-document.getElementById("tab1").offsetTop;
    }

  function mup() {
    document.getElementById("tab1").dragging=false;
    }

  function mmove(e) {
    if(!document.getElementById("tab1").dragging) 
      return false;
    var evt=window.event? window.event: e;
    document.getElementById("tab1").style.left=(document.body.scrollLeft+evt.clientX-xOld)+"px";
    document.getElementById("tab1").style.top=(document.body.scrollTop+evt.clientY-yOld)+"px";
    return true;
    }

//-->
</script>


</head>
<body>

<div id="Layer1" style="position:absolute; left:20px; top:140px; 
            width:500px; height:500px; z-index:1; 
        background-color: #00FF00; 
        layer-background-color: #00FF00; 
        border: 1px none #000000;overflow:hidden;"
        >

<table id="tab1"
style="position:absolute; left:50px; top:50px;">
<tr>
<td>
<IMG id="img1" src="../create_image.php?X1=0&Y1=0&X2=100&Y2=100&WIDTH=100&HEIGHT=100">
</td>
<td>Hallo</td>
</tr>
</table>
</div>

<div id="Layer2" style="position:absolute; left:20px; top:140px; 
            width:500px; height:500px; z-index:2; 
        background-color: transparent; 
        layer-background-color: transparent; 
        border: 1px none #000000;">
</div>

<script type="text/javascript">

<!--

// initialization

document.getElementById("Layer2").onmousemove = mmove;
document.getElementById("Layer2").onmousedown = mdown;
document.getElementById("Layer2").onmouseup = mup;
//-->

</script>


</body>
</html>

Проблема в том, что в IE6 не получается "стеклянного" слоя. Слой с картинкой оказывается наверху почему-то и соответсвенно двигать картинку не получается.

Автор: Sardar 5.10.2005, 17:11

Ой-ё... а зачем ложить слой по верху, что события отлавливает? По проблеме - да, ИЕ ведёт себя не корректно, т.к. картинка должна накрываться слоем с z-index выше чем у неё.

НО! сделать лучше по другому, поставь обработчиков на Layer1, убери Layer2. Селекцию отключаем так: http://forum.vingrad.ru/index.php?showtopic=59061

В итоге все события на картинке пузыряться на зелёный слой, на нём же и ловим мышь.

Автор: ksicom 6.10.2005, 12:13

Хождения по мукам продолжаются....
вот написал такое:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>


<script language="javascript">
<!--
  var xOld = 0;
  var yOld = 0;

  function mdown(e) {
    var evt=window.event? window.event: e;
    document.getElementById("Layer1").dragging=true;
    xOld=evt.clientX-document.getElementById("tab1").offsetLeft;
    yOld=evt.clientY-document.getElementById("tab1").offsetTop;

// Для FireFox
    if (evt.preventDefault)
      {
      evt.stopPropagation();
      evt.preventDefault();
      }
// Для IE
    else
      {
      evt.cancelBubble = true;
      evt.returnValue = false;
      }
    return false;
    }

  function mup(e) {
    var evt=window.event? window.event: e;
    document.getElementById("Layer1").dragging=false;
// Для FireFox
    if (evt.preventDefault)
      {
      evt.stopPropagation();
      evt.preventDefault();
      }
// Для IE
    else
      {
      evt.cancelBubble = true;
      evt.returnValue = false;
      }
    return false;
    }

  function mmove(e) {
    var evt=window.event? window.event: e;
    var xNew=(document.body.scrollLeft+evt.clientX-xOld)+"px";
    var yNew=(document.body.scrollTop+evt.clientY-yOld)+"px";
    if(document.getElementById("Layer1").dragging) {
      document.getElementById("tab1").style.left=xNew;
      document.getElementById("tab1").style.top=yNew;
      }
    if (evt.preventDefault)
      {
      evt.stopPropagation();
      evt.preventDefault();
      }
    else
      {
      evt.cancelBubble = true;
      evt.returnValue = false;
      }
    return false;
    }

  function mout(e) {
    var evt=window.event? window.event: e;
    var target = (evt.target) ? evt.target : ((evt.scrElement) ? evt.srcElement : null );
    if (target && target.tagName.toUpperCase()=='DIV')
{
      document.getElementById("Layer1").dragging=false;
// Для FireFox
    if (evt.preventDefault)
      {
      evt.stopPropagation();
      evt.preventDefault();
      }
// Для IE
    else
      {
      evt.cancelBubble = true;
      evt.returnValue = false;
      }
}
    return false;
    }

//-->
</script>


</head>
<body>

<div id="Layer1" style="background-color:green;
            overflow:hidden;
        width:500px;height:500px;
        position:absolute;">


<IMG id="tab1" style="position:absolute;
              left:0px;top:0px;
              width:100px;height:100px;"
src="../create_image.php?X1=0&Y1=0&X2=100&Y2=100&WIDTH=100&HEIGHT=100">


</div>

<script type="text/javascript">
<!--
// initialization
document.getElementById("Layer1").onmousemove = mmove;
document.getElementById("Layer1").onmousedown = mdown;
document.getElementById("Layer1").onmouseup = mup;
document.getElementById("Layer1").onmouseout = mout;
//-->
</script>


</body>
</html>

Вроде даже работает. Но!
Надо сделать так, чтобы при уходе мыши с DIVа св-во document.getElementById("Layer1").dragging менялось на false.
А как, не пойму.
В FireFox:
Если так как сейчас, то когда тянешь за краешек картинку, курсор всё время "соскакивает" и двигаться картинка перестаёт. Хотя почему генерится onmouseout при соскакивании с картинки не пойму. Вроде правильно обрабатываю. Когда тяну за зелёный фон, нормально всё работает.
В IE 5:
Ему вообще пофигу. Курсор уходит за DIV, возвращается и продолжает двигать картинку.

В общем как сделать не пойму smile

Автор: Aliance 6.10.2005, 16:14

ksicom
Пользуйся подсветкой правильно!