Используйте Dojo Drag and Drop вместе с Dojo Moveable - PullRequest
Новая
       22

Используйте Dojo Drag and Drop вместе с Dojo Moveable

0 голосов
/ 31 марта 2010

Я использую Dojo.dnd для передачи предметов между областями. Проблема в том, что элементы будут вставлены на место после того, как я их уроню, но я бы хотел, чтобы они оставались там, где я их уронил, но только на одну область.

Вот небольшой код, чтобы объяснить это лучше: 

  <div id="dropZone" class="dropZone">
    <div id="itemNodes"></div>
    <div id="targetZone" dojoType="dojo.dnd.Source"></div>
  </div>

"dropZone" - это DIV, который содержит две dojo.dnd.Source -области, "itemNodes" (созданные программно) и "targetZone". Элементы (DIV с изображениями) должны перетаскиваться из простого списка из «itemNodes» в «targetZone» и оставаться там, где они отброшены. Как только они вытащены из «targetZone», они должны вернуться к списку внутри «itemNodes».

Вот код, который я использую для создания предметов: 

  var nodelist = new dojo.dnd.Source("itemNodes");
  {Smarty-Loop}
    nodelist.insertNodes(false, ['<img class="dragItem" src="{$items->info.itemtext}" alt="{$items->info.itemtext}" border="0" />']);
  {/Smarty-Loop}

Но так у меня просто есть два списка предметов, предметы, помещенные в "targetZone", не останутся там, где я их бросил. Я пробовал цикл dojo.query(".dojoDndItem").forEach(function(node), чтобы захватить все элементы и изменить их на «подвижный» тип:

  • с помощью dojo.dnd.move.constrainedMoveable изменит элементы, чтобы они могли всегда перемещаться (даже в "itemNodes")
  • Использование dojo.dnd.move.boxConstrainedMoveable и определение «прямоугольника» на границах «targetZone» позволяет просто перемещать элементы внутри «targetZone», но как только я уронил их, я не смогу их перехватить обратно. (Странно: dojo.connect(node, "onMoved" здесь не работает, даже не сработает, несмотря ни на что.)

Так вот в чем вопрос: можно ли создать два источника dnd.Source, где я могу перемещать элементы назад и вперед и позволить элементам быть «перемещаемыми» только в одном из источников?
сделать элементы подвижными, и если они не будут перемещены в "targetZone", они будут автоматически перемещены обратно в список в "itemNodes"?

После того, как страница отправлена, я должен сохранить положение каждого элемента, который был помещен в "targetZone". (Следующим шагом будет размещение элементов внутри «targetZone» при загрузке страницы, если сетка уже была заполнена ранее, но я был бы рад, если бы эта штука работала в первую очередь.)

Любая подсказка приветствуется.

Привет, Select0r

Ответы [ 2 ]

0 голосов
/ 07 апреля 2010

Вот быстрый обходной путь, чтобы заставить это работать:

В итоге я использовал только один DIV, который является dojo.dnd.Source и содержит элементы, которые должны быть сброшены в «dropZone» и перемещаться в нем, возвращаясь к списку предметов, если он находится вне dropZone.

Все элементы имеют значение dojo.dnd.move.parentConstrainedMoveable, чтобы сделать их подвижными в исходном DIV. Подключение к onMoveStop даст мне возможность решить, произошло ли «падение» в dropZone или где-то еще. 

  if (coordX >= (dropCoords.l + dropAreaX)  &&
      coordX <= (dropCoords.l + dropAreaX + dropAreaW) &&
      coordY >= (dropCoords.t + dropAreaY) &&
      coordY <= (dropCoords.t + dropAreaY + dropAreaH))
  {
     // OK!
  }
  else
  {
    // outside, snap back to list
  }

dropAreaX и dropAreaY содержат координаты, где начинается dropZone, dropAreaW и dropAreaH содержат его ширину и высоту.

Если "ОК!", Элементы будут сохранены в массив, поэтому я знаю, какие элементы были отброшены. В противном случае элемент будет удален из этого массива (если он там есть), и элемент будет помещен обратно в список (с помощью CSS «left: 0»). Количество элементов в массиве скажет мне, сколько элементов осталось в списке, поэтому я могу «сложить» их в цикле, используя «top: numberOfElement * heightOfElement px»).

Это еще не все, поскольку мне нужны координаты элементов, записанные в скрытые поля, но я думаю, что это должно заставить любого, кто работает над аналогичной проблемой, на правильном пути.

0 голосов
/ 01 апреля 2010

Нет прямой поддержки таких функций. Это можно сделать с помощью пользовательского кода, например, путем подкласса Source и переопределения его insertNodes().

...