Dojo dnd target и загрузка страницы

Мой вопрос связан с примером dnd (Шаг 4: прослушивание событий), размещенным по адресу http://www.sitepen.com/blog/2011/12/05/dojo-drag-n-drop-redux./.

В моем случае у меня есть несколько источников dnd, которые охватывают несколько страниц. Как записать данные в корзине (цели), чтобы товары в ней не исчезали после загрузки разных страниц и чтобы пользователи могли продолжать бросать больше товаров?

Любые подсказки будут очень признательны!


person Sunny T    schedule 04.05.2012    source источник


Ответы (2)


см. dojotoolkit.org

Однако кажется, что документы не являются исходными для списков 1.7;

подпишитесь на набор тем и будете знать когда/что драпать

dojo.topic.subsribe

  • /dnd/start: когда начинается DnD. Текущий источник, узлы и флаг копирования (дополнительную информацию см. в менеджере startDrag()) передаются в качестве параметров этого события.
  • ./dnd/source/over : когда мышь перемещается по источнику. Источник, о котором идет речь, передается в качестве параметра. То же событие возникает, когда мышь выходит из источника. В этом случае null передается в качестве параметра.
  • /dnd/drop/before: вызывается непосредственно перед сбросом. Его можно использовать для захвата параметров падения. Параметры такие же, как и для /dnd/drop.
  • /dnd/drop: поднимается для сброса. Первые три параметра такие же, как и для /dnd/start. Четвертый параметр — целевой объект. Обратите внимание, что во время обработки этого события узлы могут быть уже перемещены или использованы повторно. Если вам нужны исходные узлы, используйте /dnd/drop/before для их захвата или используйте события, локальные для исходных/целевых объектов.
  • /dnd/cancel: когда DnD был отменен либо пользователем (нажатием клавиши Esc), либо сбросом предметов в недопустимое место. Эта тема не имеет параметров.

Пример подписки на тему:

dojo.subscribe("dnd/start", function(source, nodes, copy) {
  // see dojo.dnd.startDrag documentation for details
  // this event will process when user picks up a dnditem
  console.log("Arguments:", arguments);

};
dojo.subscribe("dnd/drop", function(source, nodes, copy, target) {
  // see dojo.dnd.startDrag documentation for details
  // this event will process when user releases dnditem on a valid target
  // note the extra parameter, target - in 99% cases a DOM node
  console.log("Arguments:", arguments);
});

Происходит следующее: пользователь берет элемент, и dndmanager вызывает dojo.publish(dnd/start, this.source, this.selection, this.bCopy). При подписке на тему вы получите уведомление.

dojo.topic работает так, как если бы вы подписались на список рассылки, вы будете получать почту, как только будут доступны новости

person mschr    schedule 05.05.2012
comment
Спасибо мшр. К сожалению, я новичок в додзё, поэтому не вижу связи между указанными выше обработчиками событий и решением моей проблемы. Думаю, я могу задать свой вопрос таким образом. Первая страница (page1.html) имеет контейнеры source1 и target. Однако источник 2 должен находиться на второй странице (page2.html). Как обработать цель, чтобы она отображалась на странице 2, принимала больше элементов и отображала элементы со страницы 1? - person Sunny T; 05.05.2012
comment
попробуйте добавить приведенный выше пример в свою кодовую базу и проверить аргументы через консоль - person mschr; 05.05.2012
comment
Спасибо, мшр. Я попробую! - person Sunny T; 06.05.2012
comment
mschr, теперь я могу получить данные в корзине на page1.html. Однако как мне перенести ТУ ЖЕ корзину (цель) на страницу page2.html с элементами, удаленными из источника 1 на странице 1.html? Или я должен создать другую цель? Я был бы очень признателен, если бы вы могли дать мне несколько советов. - person Sunny T; 07.05.2012
comment
тогда у вас есть два варианта, один; отправлять ajax-запрос на сервер при каждом добавлении в корзину и двух; чаще всего используются постоянные файлы cookie, скажем, если у вас есть идентификатор для каждого перетаскиваемого объекта - сохраните его в файле cookie dojo.cookie("mycart", idlist), затем на стороне сервера вы получите файл cookie, когда page2.html (необходимо использовать другой, чем .html..), и вы можете организовать копия вашего перетаскиваемого в корзину - так что она там при ее создании - person mschr; 07.05.2012

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

<script>
    function dropped(source, nodes, copy, target) {
      if(target.id == "myCardId") {
        var list = dojo.cookie("mycart");
        // split or initialize list (delimiter : comma)
        list = list = "" ? [] : list.split(",");
        if(dojo.indexOf(nodes[0].id), list) != -1)
           // allready there, return
           return;
        else {
           // combine list with every dropped node
           dojo.forEach(nodes, function(dropItem) { list.push(dropItem.id); });
           // set cookie with new variable
           dojo.cookie("mycart", list.join(",");
        }
      }
    }

    ....
   dojo.subscribe("dnd/drop", dropped);
</script>

Может быть реализовано на PHP таким образом, хотя я не буду вдаваться в подробности того, как вы получаете представление элементов, ради примера - они у вас есть в db_data;

<?php

if(isset($_COOKIE) && !empty($_COOKIE['mycart'])) {
   $cartContents = "<ul class=\"dndContainer\">";
   foreach(explode(",", $_COOKIE['mycart']) as $id)
      $cartContents .= "<li class=\"dndItem\">".$db_data[$id]->title."</li>";
   $cartContent .= "</ul>";
}
?>
<div id="dragSource"><? print generateView(); ?></div>
<div id="myCartId"><? print $cartContents; ?></div>

в качестве альтернативы для больших тележек файл cookie является излишним и будет загромождать заголовки. Приведенный выше скрипт может затем отправить XHR с идентификатором и сервером, а затем добавить его к сеансу, используя ту же логику, что и javascript - в этом случае просто замените $_COOKIE на $_SESSION

person mschr    schedule 07.05.2012