VPF::Реализация drag&drop между окнами - Форум программистов

Deg

Дата 29.11.2006, 11:31 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 28.9.2006
Где: Dniepropetrovsk, Ukraine

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

Есть такая задачка:

Допустим, у нас есть несколько окон, к примеру IE, и в них находятся ссылки... Разбиваю окна по названиям, дабы не запутать ни себя ни других.

1 - меню
2 - Произвольная страница с этого же сайта
3 - Произвольная страница с другого сайта

Работаем с Drug&Drop: тащим ссылку (текстовую)из окна 2 или 3 в окно 1 на существующую ссылку. При этом ссылка в окне 1 (на которую бросали ссылку из окна 2 или 3) заменяла свой url на тот, который перетащили... Иными словами есть такое

Окно 1

Код


<a href="http://www.ya.ru">Ya.ru</a>

Окно 2

Код


<a href="http://www.yandex.ru">Yandex</a>

Тащим "Yandex" на "ya.ru" и получается

Окно 1

Код


<a href="http://www.yandex.ru">Ya.ru</a>

Окно 2

Код


<a href="http://www.yandex.ru">Yandex</a>

Вот так... smile

Цель вопроса - пример работы с драг энд дроп...

БОЛЬШОЕ СПОСИБО ЗА ПОДРОБНЫЕ ПРИМЕРЫ

p.s. Можно меня посылать в доку, где чтото похожее написано на примерах.

СПОСИБО ВСЕМ ОТВЕТИВШИМ!

Это сообщение отредактировал(а) Deg - 29.11.2006, 11:40

Sardar

Дата 2.12.2006, 22:38 (ссылка)

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

Загрузка ...

Бегун

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

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

Наиболее переносимо это будет так:

ловим клик или более продвинутый ondragstart (эмулируем для не ИЕ если нужно)
бросаем в родительское (opener) уведомление вместе с данными (ссыылка)
во втором окошке в ссылках (целевых) ловим onkeyup или эмулируем более продвинутый ondrop для не ИЕ.
опрашиваем у opener'а инфу, что оставило другое окно, обновляем ссылку.

В итоге всё сводиться к ловле клика в одном окне, ловле onmouseup/ondrop в другом окне, а данные передаються через обще для обоих opener окно. Да, не особо красиво, но переносимо под разные браузеры.

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

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Deg

Дата 4.12.2006, 14:46 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 28.9.2006
Где: Dniepropetrovsk, Ukraine

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

Дружище! Ты, без спора, профи. Только вот не мог бы ты тривиальный примерчик такого кода дать плизззз...

Sardar

Дата 5.12.2006, 23:41 (ссылка)

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

Загрузка ...

Бегун

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

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

Так, совет отменяется перерастая в "это не возможно". А не возможно это потому что окно не будет генерить события пока не имеет фокуса, по крайней мере под виндой. Т.е. кликаем в одном окне и "тащим ссылку" в другое, но оно реагировать ни на что не будет, пока ты мышь не отпустишь и не кликнешь в целевом окне (т.е. передашь фокус).

Вывод: клик в одном окне, затем клик в другом окне и никаких drag&drop'ов smile

Пример где можно оценить ситуацию, для простоты пользовал ondragstart, который просто эмулируеться для не ИЕ браузеров событиями onmousedown и onmousemove.

index.htm

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Main page</title>
        <script type="text/javascript">

var data='';
function setData(dat) {
    data = dat;
    document.getElementById("clip").innerHTML = dat;
}

function getData() {
    return data;
}

        </script>
    </head>

    <body>    <div>Clipboard data:</div>
        <div id="clip"></div>
        <div>
            <a href="one.htm" target="one">Source window</a>
            <a href="two.htm" target="two">Target window</a>
        </div>
    </body>
</html>

one.htm

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Source page</title>
        <script type="text/javascript">
//отрубаем дальнейшее продвижение события и дефолтовое действие
function cancelEvent(ev) {
    if(ev.preventDefault) ev.preventDefault();
    if(ev.stopPropagation) ev.stopPropagation();
    ev.returnValue = false;
    ev.cancelBubble = true;
}

function sourceLink(a) {
    //родительское окно связывает два дочерних, без него не сможем передать данные
    if(!window.opener || window.opener == self) return;
    window.opener.setData(a.href);
}


        </script>
    </head>

    <body> <h1> Source page </h1>
        <ul>
            <li><a href="http://yandex.ru" ondragstart="sourceLink(this); cancelEvent(event); return false;">yandex.ru</a>
            <li><a href="http://google.ru" ondragstart="sourceLink(this); cancelEvent(event); return false;">google.ru</a>
            <li><a href="http://mail.ru" ondragstart="sourceLink(this); cancelEvent(event); return false;">mail.ru</a>
        </ul>
    </body>
</html>

two.htm

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Destination page</title>
        <script type="text/javascript">
//отрубаем дальнейшее продвижение события и дефолтовое действие
function cancelEvent(ev) {
    if(ev.preventDefault) ev.preventDefault();
    if(ev.stopPropagation) ev.stopPropagation();
    ev.returnValue = false;
    ev.cancelBubble = true;
}

function placeLink(a) {
    //родительское окно связывает два дочерних, без него не сможем передать данные
    if(!window.opener || window.opener == self) return;
    var d = window.opener.getData();
    if(!d) return;
    a.href = d;
    a.innerHTML = d.replace(/^http:\/\//, '');
}


        </script>
    </head>

    <body onmousemove="document.getElementById('dbg').innerHTML=event.x;"> <h1>Destination page</h1>
        <ul>
            <li><a href="http://vingrad.ru" onmouseup="placeLink(this); cancelEvent(event); return false;">vingrad.ru</a>
            <li><a href="http://aport.ru" onmouseup="placeLink(this); cancelEvent(event); return false;">aport.ru</a>
            <li><a href="http://linux.org.ru" onmouseup="placeLink(this); cancelEvent(event); return false;">linux.org.ru</a>
        </ul>
        <div id="dbg"></div>
    </body>
</html>

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

Deg

Дата 20.3.2007, 09:19 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 28.9.2006
Где: Dniepropetrovsk, Ukraine

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

Спасибо, хоть поздновато, но все же! smile

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