Перетаскивание блоков

← →
SerJaNT © (2008-01-13 15:11) [0]

Есть ли в сети пример (желательно на JS и PHP) который реализует перетаскивание блоков как здесь http://www.google.com/ig?hl=en

?

← →
Kerk © (2008-01-13 15:16) [1]

А сам гугль тебе чем не пример? :)
JS вообще-то доступен

← →
SerJaNT © (2008-01-13 15:19) [2]

> Kerk © (13.01.08 15:16) [1]

посмотри на исходный код. Там же ужас что творится..

← →
DVM © (2008-01-13 15:20) [3]

> SerJaNT

а тебе что из трех строк пример дать? Я сно что ужас. Это непростой пример будет. Библиотек таких полно вообще то.

← →
SerJaNT © (2008-01-13 15:23) [4]

> Это непростой пример будет. Библиотек таких полно вообще
> то.

например?

← →
Kerk © (2008-01-13 15:23) [5]

> SerJaNT © (13.01.08 15:19) [2]

Тут полазь - http://code.google.com/

← →
Ketmar_ (2008-01-13 15:23) [6]

а в чём проблема? у div"а есть событие mousedown. и mouseup. также есть css, где есть position, left и top. дальше учим:
а) программирование (всегда полезно);
б) DOM API (всяко стоит);
в) HTML и CSS (небесполезно).

потом пишем простой JS.

← →
SerJaNT © (2008-01-13 15:32) [7]

я даже не знаю как это называется? так бы погуглил хоть..

← →
Ketmar_ (2008-01-13 15:39) [8]

на, ешь.
<html><body> <div id="mywin" style="position:absolute;left:50;top:50;width:200;height:100;text-align=center;background:#222;color:#aaa;border:1px solid #fff;"> this is my window! </div> <br>hey, we can have a text here!<hr>heehoo!</hr> <script> var win = document.getElementById("mywin"); var moving = false, wdx, wdy; function OnMouseMove (evt) { if (moving) { win.style.left = evt.pageX-wdx; win.style.top = evt.pageY-wdy; evt.preventDefault(); } } function OnMouseDown (evt) { win.style.opacity = "0.5"; moving = true; wdx = evt.offsetX; wdy = evt.offsetY; window.addEventListener("mousemove", OnMouseMove, false); evt.preventDefault(); } function OnMouseUp (evt) { moving = false; win.style.opacity = "1"; window.removeEventListener("mousemove", OnMouseMove, false); evt.preventDefault(); } win.addEventListener("mousedown", OnMouseDown, false); win.addEventListener("mouseup", OnMouseUp, false); </script> </body></html>

← →
Ketmar_ (2008-01-13 15:40) [9]

написано для Opera 9.5. для остальных, возможно, понадобится напильник (для недоброфзера точно), но, думаю, тут ты как-то уж сам асилишь…

← →
TStas © (2008-01-13 15:44) [10]

Чего-то у меня в этом примере ничего не перетаскивалось. Однако, задача по перетаскиванию мышой частей страницы не простая, а примитивная.

← →
SerJaNT © (2008-01-13 15:44) [11]

> Ketmar_

спасибо, попробую..
И всё же, как это называется?

← →
SerJaNT © (2008-01-13 15:48) [12]

мало того просто перемещать, нужно как-то сделать зоны, в которые можно перетаскивать эти блоки.. вообщем как на http://www.google.com/ig?hl=en

← →
DVM © (2008-01-13 15:50) [13]

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

я ж тебе говорю простым примером не обойтись. А насчет зон - это просто проверка в OnMouseMove

← →
SerJaNT © (2008-01-13 15:53) [14]

> DVM © (13.01.08 15:50) [13]

а какие библиотеки есть?

← →
Ketmar_ (2008-01-13 15:53) [15]

> TStas © (13.01.08 15:44) [10]
я ж написал — Opera 9.5. добавлю — latest developer snapshot. я ленивый, на остальных проверять не хочу.

> SerJaNT © (13.01.08 15:44) [11]
бояре глаголют — «веб два нуля».

> SerJaNT © (13.01.08 15:48) [12]
может, за тебя всё написать? так ты не стесняйся, указывай сумму оплаты, сроки, точное ТЗ. будет тебе всё. а если сам — вон, я дал базу. дальше садишься и думаешь.

читаешь, опять же, про проектирование GUI (не на уровне юзабилити, а на уровне кода). потом реализуешь. примитивы у тебя есть (фактически, есть графическая подсистема с поддержкой событий и перекрывающихся окон, мощная весьма графическая подсистема). твоя задача — сделать над ней сам GUI. т.е. написать Window Manager, по-сути.

если и этого не хватит — мётлы наверняка продаются в ближайшем магазине хозтоваров.

← →
Ketmar_ (2008-01-13 15:55) [16]

> SerJaNT © (13.01.08 15:53) [14]
jQuery, Prototype, Yahoo Widgets (как она там зовётся? короче, от йеху %-). по ссылкам с их сайтов найдёшь реализации GUI. в зависимости от задачи проще будет или взять готовое и разобраться, или написать своё.

← →
DVM © (2008-01-13 16:03) [17]

> SerJaNT © (13.01.08 15:53) [14]
>
> > DVM © (13.01.08 15:50) [13]
>
> а какие библиотеки есть?

http://cgi.myweb.ru/catalog.phtml?ca_id=5&cp_level=1 тут есть наверное

вот еще http://www.03www.ru/index.php

Вспомнил. GWT качай, Google Web Toolkit вроде переводится

> [8] Ketmar_ (13.01.08 15:39)

работает на Opera 9.10

← →
Ketmar_ (2008-01-13 17:51) [21]

> VirEx © (13.01.08 17:42) [20]
я нечаянно, честное слово! %-)

алсо, не работает как надо — Оперы до текущей 9.50 (исключительно) не умеют отменять выделение текста по preventDefault(), потому текст выделяется. раздражает. в текущем снапшоте починили.

Вот, нашел, то что нужно: WinLike - http://www.winlike.net/

автор делает http://www.netvibes.com/ ? ))

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

>[22] SerJaNT ©(15.01.08 00:24)
>Вот, нашел, то что нужно: WinLike — http://www.winlike.net/
быдлоподелие не держит Оперу 9.50. фтопку.
к тому же платное. фтопку два раза. этих window managers как псов небитых, на любой вкус, вообще-то.

Перетаскивание блоков Найти похожие ветки