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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Реализация Drag&drop, различные проблемы в IE и firefox 
:(
    Опции темы
ksicom
Дата 3.10.2005, 11:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: 1
вот скрипт:
Код

<!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
PM MAIL   Вверх
Sardar
Дата 3.10.2005, 12:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
Тебе нужно это: http://forum.vingrad.ru/index.php?showtopi...ndpost&p=464276

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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
ksicom
Дата 3.10.2005, 12:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: 1
Я не пойму, почему картинка меняется => в обработчик события входит нормально и картинку меняет нормально
а таблицу не двигает!
Причём только FF. Изредка, закономерность определить не удалось, таблица перепрыгивает с места на место.
IE таблицу двигает
PM MAIL   Вверх
Sardar
Дата 3.10.2005, 12:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
ksicom
Дата 3.10.2005, 13:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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

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

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

Это сообщение отредактировал(а) ksicom - 3.10.2005, 13:32
PM MAIL   Вверх
ksicom
Дата 4.10.2005, 17:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: 1
очередная проблема с этим скриптом.
Не работает в IE6
Тот слой, на котором картинки вылезает перед слоем событий.
Как я понял - проблема давняя, но вот ответа на вопрос, как заставить работать в IE6 не нашёл.
PM MAIL   Вверх
Sardar
Дата 4.10.2005, 23:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
Выложи полный, самый свежий код. Возьми это за привычку на будущее.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
ksicom
Дата 5.10.2005, 11:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: 1
Вот последняя версия
Код

<!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 не получается "стеклянного" слоя. Слой с картинкой оказывается наверху почему-то и соответсвенно двигать картинку не получается.

Это сообщение отредактировал(а) Aliance - 6.10.2005, 16:13
PM MAIL   Вверх
Sardar
Дата 5.10.2005, 17:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

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

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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
ksicom
Дата 6.10.2005, 12:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: 1
Хождения по мукам продолжаются....
вот написал такое:
Код

<!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:13
PM MAIL   Вверх
Aliance
Дата 6.10.2005, 16:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137
ksicom
Пользуйся подсветкой правильно!


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

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

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




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


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

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