Работаем с drag&drop(перемещение+сбрасыввание) Ну-с продолжим наше заседание, на повестке дня работа - drag&drop Вообще-то, много кто считает, что drag&drop более правильней(лучше, оперативней, круче, заипато, нужное подчеркнуть ) организовывать с помощью библиотеки prototype+aculo.script.us Что ж они могут становиться в очередь идущих наф… читать другой пост=), шучу, на самом деле оба варианта хороши, но на ачате как мне показалось, более популярность имеет, именно jquery, остановимся на ней ( если будет, время напишу и про p+as вариант) Ну-с начнем… Нам поможет библиотека jquery и замечательный плагины к ней draggable и droppable, минимум времени, минимум знаний js Состав: jquery.js ui.mouse.js – для draggable ui.draggable.js – для draggable ui.draggable.ext.js – для draggable? Типа добавление прозрачности ui.droppable.js – для droppable ui.droppable.ext.js – для droppable расширение(можно и без него) Подключение файлов: Code: <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/dd/ui.mouse.js"></script> <script type="text/javascript" src="/js/dd/ui.draggable.js"></script> <script type="text/javascript" src="/js/dd/ui.draggable.ext.js"></script> <script type="text/javascript" src="/js/dd/ui.droppable.js"></script> <script type="text/javascript" src="/js/dd/ui.droppable.ext.js"></script> Заметьте, я специально вынес плагин в отдельную папку dd Активация модуля: Code: <script type="text/javascript"> // оболочка jquery, предпочтительней подключать именно так $(document).bind("ready", function(){ $("div.object").draggable(); }); </script> $("div.object").draggable(); выбираем набор элементов DIV, имеющих класс . object, и делаем их перемещаемыми Все, ЭТО ВСЕ!!! Товаисчи, у вас организован drag&drop Но толку от этого ? просто красивая игрушка? Нет! Мы разнообразим наш код Активация модуля(усложняем пример): Code: <script type="text/javascript"> // оболочка jquery, предпочтительней подключать именно так $(document).bind("ready", function(){ $("div.object").draggable({ helper: 'clone', opacity: 0.5 }); $("#main").droppable({ accept: ".object", activeClass: 'active', hoverClass: 'hover', drop: function(ev, ui){} }); }); </script> Рассмотрим код еще раз: Draggable: helper: clone - при перемещении элемента мы создаем его копию(то есть сам элемент останеться на месте), а перемещаем только копию opacity: 0.5 – прозрачность элемента, который перемещаем Droppable: $("#main").droppable – одна из зон для сброски перемещаемых объектов имеет id =main accept: ".object" – принимать только объекты, имеющих класс object (не фих совать совать не наше) activeClass: - Класс .active будет использован, когда перемещение элемента уже начался, но перемещаемый элемент еще не над элементом, куда нужно сбрасывать объект. hoverClass: - Kласс .hover будет использован, когда перемещаемый элемент окажется над над элементом, куда нужно сбрасывать объект. drop: function(ev, ui){} – функция обратного вызова Именно от этой функция мы и пляшем, это может быть и сброс в корзину, и ajax запросы, ну все, что хоч короче… В итоге, что мы имеем? astrologer, да этот плагин написал не я, я просто хотел показать, как легко использовать drag&drop на вашем сайте, и это очень быстро, требует минимум знаний, и дает очень большие возможности… да и зачем изобретать велосипед(доднлать пару педалей конечно можно), это тоже, что переписывать jquery Вообщем целый полет для фантазии! Какие только можно корзины в инет магазах делать… у пальчики оближешь И напоследок пример функции drop: На последнем сайте, у меня было задание, устанавливать иконку для новостей перетаскиванием рисунков из галереи на определенный див, и в этом диве увеличивалась маленькая картинка и фиксировалась + передавался запрос ajax серверу Code: function(ev, ui) { var code = $(ui.draggable.element).find("img").attr("id"); if($(this).find("div[@id='"+ code +"']").html()==null) { $(this).empty(); var id = $(ui.draggable.element).attr("id").split("_"); var src = $(ui.draggable.element).find("img").attr("src"); $(this).append("<img id="+id+" src=\""+src+"\"/ height=\"170\" width=\"170\">"); xajax_setMainImage($("#news_id").attr("value"), id[1]); } } Code: ($(this).find("div[@id='"+ code +"']").html()==null Проверяем, нет ли уже в нашей зоне картинки с таким же id Code: var src = $(ui.draggable.element).find("img").attr("src"); Обращаемся к перемещаемому элементу, ищем img, получаем значение атрибута Code: $(this).append("<img id="+id+" src=\""+src+"\"/ height=\"170\" width=\"170\">"); B присваевываем(ну и слово) это значение нашему главному рисунку По поводу ajax, здесь пришлось использовать библиотеку xajax, но вполне сгодятся и обычные jquery $.ajax Шеф попалил(типа как я там усердно печатаю, наверно идея новая пришла в голову), к сожалению не могу все перепроверить(возможны опечатки), обойдемся одним примером Будет время забадяжу красивый пример Ну пища для вас есть В общем все это легко For antichat Пс файлы выложу чуток позжу
Файлы в архиве на http://siteviewer.net/naydav/dd.rar +подключить еще можно файл jquery.dimensions.js