Работаем с 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 расширение(можно и без него)
Подключение файлов:
Код:
<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
Активация модуля:
Код:
<script type="text/javascript">
// оболочка jquery, предпочтительней подключать именно так
$(document).bind("ready", function(){
$("div.object").draggable();
});
</script>
$("div.object").draggable(); выбираем набор элементов DIV, имеющих класс . object, и делаем их перемещаемыми
Все, ЭТО ВСЕ!!! Товаисчи, у вас организован drag&drop
Но толку от этого ? просто красивая игрушка? Нет! Мы разнообразим наш код
Активация модуля(усложняем пример):
Код:
<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 серверу
Код:
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]);
}
}
Код:
($(this).find("div[@id='"+ code +"']").html()==null
Проверяем, нет ли уже в нашей зоне картинки с таким же id
Код:
var src = $(ui.draggable.element).find("img").attr("src");
Обращаемся к перемещаемому элементу, ищем img, получаем значение атрибута
Код:
$(this).append("<img id="+id+" src=\""+src+"\"/ height=\"170\" width=\"170\">");
B присваевываем(ну и слово) это значение нашему главному рисунку
По поводу ajax, здесь пришлось использовать библиотеку xajax, но вполне сгодятся и обычные jquery $.ajax
Шеф попалил(типа как я там усердно печатаю, наверно идея новая пришла в голову
), к сожалению не могу все перепроверить(возможны опечатки), обойдемся одним примером
Будет время забадяжу красивый пример
Ну пища для вас есть
В общем все это легко
For antichat
Пс файлы выложу чуток позжу
[jquery] Работаем с drag&drop (перемещение+сбрасыввание)
Похожие темы
Линейный вид
