VPF::Drag&drop картинки в Gecko - Форум программистов

Burrr

Дата 20.6.2007, 18:56 (ссылка)

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

Загрузка ...

Опытный

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

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

Реализую drag&drop дива с картинкой (именно картинкой, а не текстом или еще чем-то). Вот код:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Drag & drop</title>
    <script type="text/javascript">
    // Переменная состояния, по умолчанию ничего не двигается = false
    var moveState = false;
    // Переменные координат мыши в начале перемещения, пока неизвестны
    var x0, y0;
    // Начальные координаты элемента, пока неизвестны
    var divX0, divY0;
    // Объявим функцию для определения координат мыши
    function defPosition(event) {
          var x = y = 0;
          if (document.attachEvent != null) { // Internet Explorer & Opera
                x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
                y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
          }
          if (!document.attachEvent && document.addEventListener) { // Gecko
                x = event.clientX + window.scrollX;
                y = event.clientY + window.scrollY;
          }
          return {x:x, y:y};
    }
    // Функция инициализации движения
    // Записываем всё параметры начального состояния
    function initMove(div, event) {
          var event = event || window.event;
          x0 = defPosition(event).x;
          y0 = defPosition(event).y;
          divX0 = parseInt(div.style.left);
          divY0 = parseInt(div.style.top);
          moveState = true;
    }
    
    // Если клавишу мыши отпустили вне элемента движение должно прекратиться
    document.onmouseup = function() {
          moveState = false;
    }
    // Функция обработки движения:
    function moveHandler(div, event) {
          var event = event || window.event;
          if (moveState) {
                div.style.left = (divX0 + defPosition(event).x - x0) + "px";
                div.style.top = (divY0 + defPosition(event).y - y0) + "px";
          }
    }
    </script>
    <style type="text/css">
    .abs {
        float:left;
        position:absolute;
        border:2px solid yellow;
    }
    </style>
</head>
<body>
<div class="abs" style="top:10px; left:10px;" onmousedown="initMove(this, event);" onmouseup="moveState = false;" onmousemove="moveHandler(this, event);">
    <img onDragStart="return false;" src="img/1.jpg" width="120" height="120" alt="" />

<div>
</body>
</html>

Мои комментарии:
1) Если в ДИВ-е любой контент кроме картинок - всё перетаскивается на ура!
2) За счет onDragStart="return false;" в ИЕ и Опере работает как задумывалось.

А вот в Гекко косяк. При перетаскивании он пытается тащить картинку, а не весь ДИВ, спотыкается и всё ломается.
Понаблюдать можно скопировав мой код к себе и запустив, например, в Лисе.

Переверстка в бэкграунд не поможет, т.к. нужно иметь именно картинку, чтоб юзер мог воспользоваться ф-ией "Save Picture As".
Видел работающий вариант на Фликере, но в коде у них разобраться нереально!

Хелп!

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

JavaScript на fastcoder, sqlinfo.ru

Alx

Дата 20.6.2007, 23:32 (ссылка)

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

Загрузка ...

Ajaxy

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

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

Burrr,
если тебе код нужен, смотри здесь.
а что там у тебя сейчас посмотрим

Добавлено через 7 минут и 36 секунд
хм, вспомнил, мы вот тоже делали, давно ещё - http://flyweb.in/soft/small/JsDragObjs/example.html
вроде тоже картинку в FF не перетаскивает..

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

Burrr

Дата 21.6.2007, 10:09 (ссылка)

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

Загрузка ...

Опытный

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

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

Alx, ты только подтвердил, что проблема существует. Тоже полезно, однако, может её кто-нибудь решить?

То что решение есть - вероятность 100%, видел на фликере, перетаскивалась картинка, для которой можно было сделать "Save Picture As". Ссылку дать не могу, т.к. нужна авторизация.
Посмотреть можно в разделе сортировки фото.

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

JavaScript на fastcoder, sqlinfo.ru

SelenIT

Дата 21.6.2007, 10:34 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Burrr, вот здесь мы с 12345c боролись с подобной проблемой для ссылок. Может быть, какие-нибудь находки пригодятся...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Burrr

Дата 21.6.2007, 11:58 (ссылка)

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

Загрузка ...

Опытный

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

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

SelenIT, спасибо, в точку! +1

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

JavaScript на fastcoder, sqlinfo.ru

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