Форум АНТИЧАТ - [jquery] Работаем с drag&drop (перемещение+сбрасыввание)

Работаем с 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

Пс файлы выложу чуток позжу :)