Используйте Dojo Drag and Drop вместе с подвижным Dojo

StackOverflow https://stackoverflow.com/questions/2551742

  •  23-09-2019
  •  | 
  •  

Вопрос

Я использую 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». Элементы (Divs с изображениями) должны быть вытащены из простого списка из «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.sources, где я могу перемещать элементы вперед и назад и позволить предметам быть «подвижными» только в одном из источников?
Или есть обходной путь, такой как сделать элементы подвижными, и если они не попадают в «TargetZone», они будут автоматически перемещены в список в «ItemNodes»?

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

Любой подсказка ценится.

Приветствия, Select0r

Это было полезно?

Решение

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

Другие советы

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

Я закончил тем, что использовал только один див, который dojo.dnd.Source и содержит предметы, которые должны быть сброшены в «капельку» и перемещаются в ней, когда отступает к списку предметов, когда помещается за пределы капельницы.

Все предметы dojo.dnd.move.parentConstrainedMoveable Чтобы сделать их подвижными в исходном див. Присоединенный к 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 содержать координаты, где начинается капельница, dropAreaW а также dropAreaH содержать его ширину и высоту.

Если «ОК!», Предметы будут сохранены в массиве, поэтому я знаю, какие предметы были отброшены. В противном случае элемент будет удален из этого массива (если он там), а элемент будет помещен обратно в список (через CSS «Слева: 0»). Количество элементов в массиве скажет мне, сколько элементов осталось в списке, поэтому я могу «сложить» их в цикл, используя «Top: NumberFelement * HeightFelement PX»).

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top