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

Я использую 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-areas, "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 ответа

Решение

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

Источник

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

Я в конечном итоге использовал только один 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").

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

Источник
Другие вопросы по тегам