React-dnd: Поддержка перетаскивания нескольких элементов

Не в приоритете. Мы можем вернуться к нему после введения ключей источника перетаскивания (https://github.com/gaearon/react-dnd/issues/38#issuecomment-73409935).

Я буду интересоваться этим в будущем, хотя я думаю, что вы могли бы просто обернуть часть своего дерева компонентов компонентом, у которого есть dragSource ...
Например, если вы удерживаете Shift и щелкаете, он расширяет, какие разделы массива копируются в dragItem или что-то в этом роде?

Вроде.

Сначала мы учимся передавать null component (необходимо для # 38) и другой компонент с тем же key (необходимо для # 53).

Затем мы добавляем groupKey что является необязательным. Как и key , он указывается в источнике перетаскивания и является строкой. Когда вы начинаете перетаскивать что-то с groupKey , мы вызываем beginDrag не только для вызывающего, но и для каждого установленного источника перетаскивания с тем же groupKey и собираем их элементы в массив. Мы передадим эти элементы вместо item для удаления целевых методов. Когда перетаскивание закончено, мы вызовем acceptDrop для цели перетаскивания с массивом элементов, а затем вызовем endDrag каждого источника перетаскивания с их элементом.

Что интересно, мы можем нарисовать DragLayer с помощью настраиваемого «составного» компонента эскиза и счетчика, как я сделал снимок экрана выше, потому что мы знаем счет из items.length .

Это менее уродливая идея, чем то, что я имел в виду

: +1: за эту функцию :-)

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

@gaearon

В свое время я использовал Java / Swing DnD, и у них, вероятно, была армия разработчиков, которые взялись за эту проблему и придумали довольно изощренную, чрезвычайно универсальную и гибкую структуру. Я бы порекомендовал изучить старые фреймворки для настольных ПК, поскольку они, вероятно, решили все сложные проблемы, создав хороший фреймворк DnD, подобный этому.

Способ сделать это в Java / Swing (хотя в нем не было встроенной поддержки перетаскивания изображений) состоял в том, чтобы _ сделать само представление дерева источником перетаскивания_ и сделать _ возможным решить, следует ли начинать перетаскивание на основе его текущее состояние и начальная позиция перетаскивания_. Доступен ли monitor.getInitialSourceClientOffset() при вызове canDrag и beginDrag ? Люди обязательно захотят, чтобы это было доступно. Они, вероятно, также захотят, чтобы были доступны клавиши-модификаторы (ctrl, alt, shift) и чтобы источники перетаскивания могли указывать, следует ли перемещать или копировать, и цели опускания, чтобы указать, поддерживают ли они перемещение и / или копирование, в зависимости от любого из эти факторы, потому что это возможно в Java / Swing, и я предполагаю, что в других фреймворках. Swing также имел концепцию распознавателей жеста перетаскивания, которые можно было заменить.

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

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

Кто-нибудь реализовал перетаскивание нескольких элементов с помощью response-dnd в своих приложениях? Какое у вас текущее решение для этого?

Вы имели в виду несколько целей перетаскивания для одного источника перетаскивания?

+1 @ danii1 : Кто-нибудь реализовал перетаскивание нескольких элементов?

Я реализовал это, решение в основном то, что описано в первом посте:

1. Следите за выбранными вами товарами
2. Реализуйте CustomDragLayer (см. Https://gaearon.github.io/react-dnd/docs-drag-layer.html) и самостоятельно визуализируйте выбранные элементы.
3. Обработка выпадения, если выпавший элемент является частью выбора

Я реализовал это:

1. Следите за выбранными элементами в наборе
2. Передайте это как свойство источнику dnd
3. В beginDrag извлеките Set из реквизита и верните его как элемент перетаскивания
4. Создайте собственный предварительный просмотр перетаскивания
5. На EndDrag переместите все элементы Set в dnd Target

У меня есть немного другой вариант использования для этого, я думаю, я хочу рисовать узлы, которые можно перетаскивать, с краями, которые не перетаскиваются, но перемещаются, когда узлы, которые они прикреплены, перемещаются. Моя текущая реализация - это CustomDragLayer который рисует края, когда обнаруживает, что DraggableNode движется (также нарисовано на CustomDragLayer но я думаю, что было бы лучше смоделировать его как ситуация с множественным перетаскиванием путем реализации всех краев как DragSources с реализованным isDragging() чтобы определить, движется ли узел, к которому они прикреплены, чтобы они могли рисовать себя вместо того, чтобы CustomDragLayer вводил координаты в качестве реквизита .

@ danii1
Не могли бы вы поделиться тем, что вы реализовали, для справки

Я напишу сообщение и добавлю репо о множественном и вложенном перетаскивании с помощью response-dnd + redux.

@nayemmajhar , было бы здорово

@nayemmajhar какое-нибудь обновление на примере с этим?

Я давно разработал это приложение, используя response DnD с reduxJS https://www.joomshaper.com/page-builder Я пишу учебник, но мне нужно время для публикации

@serle Не

@ ianmclean2011, посмотрите здесь: https://github.com/react-dnd/react-dnd/issues/590

Я пытаюсь реализовать множественное перетаскивание в примере, аналогичном сортируемому примеру здесь: https://react-dnd.github.io/react-dnd/examples-sortable-simple.html. Я хочу иметь возможность выбирать любые объекты, а затем перемещать их как единое целое вверх и вниз по списку. У меня проблемы с пониманием того, как использовать приведенные выше примеры / информацию для этого. Любые мысли / идеи / отзывы о том, как это может работать?

Если кому-то интересно, я реализовал несколько видов перетаскивания / сетки: https://codesandbox.io/s/9j897k0mwy.
Вы можете использовать cmd / ctrl и клавиши Shift, чтобы выбрать несколько элементов, затем перетащить их по сетке и вставить в любое место.

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

@melvynhills Изучили ли вы решение, которое не требует передачи всех выбранных карт каждому компоненту карты? Я не думаю, что есть решение, учитывая, что beginDrag () карты требует ссылки на все выбранные карты.

@jmcrthrs Нет, мне это кажется невозможным с помощью response-dnd API. Я не думаю, что есть способ узнать перед перетаскиванием, какой именно элемент будет перетаскиваться. Это также единственный способ узнать, находится ли перетаскиваемый элемент в множественном выделении, которое вы сделали, или он находится за пределами этого выделения, которое нам затем нужно заменить.

@melvynhills @jmcrthrs другие фреймворки dnd для рабочего стола, которые я использовал, полагаются на создание списков и таблиц в качестве источников / целей перетаскивания вместо того, чтобы делать каждую отдельную строку, ячейку, элемент и т. д. своим собственным источником перетаскивания и / или целью перетаскивания. Таким образом, реализация перетаскивания нескольких элементов, а также получение определенного места перетаскивания в списке или таблице получается намного чище. Когда список получает событие начала перетаскивания, он может просто посмотреть на свои текущие выбранные элементы.

@ jedwards1211 как вы думаете, это возможно с этой библиотекой? Особенно в случае начала перетаскивания элемента, который не был выбран до начала перетаскивания. Я не уверен, что так должен работать react-dnd.

Кто-нибудь решил случай, когда есть несколько целей падения?
Допустим, один из них перетаскивает несколько элементов (используя одно из вышеперечисленных решений), и один элемент оказывается на одном типе цели перетаскивания, а другой - на другом. drop будет срабатывать только для источника перетаскивания, который инициировал перетаскивание, но не для другого. Есть идеи, как вызвать падение индивидуально для каждого перемещаемого элемента.
Пример:

РЕДАКТИРОВАТЬ: создана отдельная проблема для этого https://github.com/react-dnd/react-dnd/issues/1650

@melvynhills, вероятно, если обработчик mousedown запускает выбор элемента (что вы должны делать, все программное обеспечение с DnD, которое я использовал, работает таким образом), он будет отлично работать с React DnD, чтобы компонент контейнера был перетаскиванием source, потому что события перетаскивания появятся после mousedown .

Вы исследовали решение, которое не требует передачи всех выбранных карт каждому компоненту Card?

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

Кто-нибудь реализовал перетаскивание нескольких элементов с помощью response-beautiful-dnd в своих приложениях? Какое у вас текущее решение для этого?