Пользовательский предварительный просмотр для сенсорных экранов с помощью [dnd-multi-backend] или [TouchBackend] + [HTML5Backend] + [Modernizr]? - PullRequest
Новая
       36

Пользовательский предварительный просмотр для сенсорных экранов с помощью [dnd-multi-backend] или [TouchBackend] + [HTML5Backend] + [Modernizr]?

1 голос
/ 15 марта 2019

в библиотеке dnd-multi-backend , есть инструкции с таким текстом:

Так как встроенный Drag-n-Drop в настоящее время не поддерживается на сенсорных устройствах.Требуется пользовательский DragPreview .Посмотрите пример для примера реализации.

Но ссылка на пример не работает.У кого-нибудь есть пример того, как добавить «призрачный» предварительный просмотр при перетаскивании элемента на сенсорные устройства?

PS На ноутбуках предварительный просмотр работает.Опция предварительного просмотра в HTML5toTouch установлена ​​на true.

1) При использовании dnd-multi-backend dnd на ноутбуках и сенсорных устройствах работает, но нет предварительного просмотра на сенсорных устройствах: 

import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
import TouchBackend from 'react-dnd-touch-backend';
import HTML5Backend from 'react-dnd-html5-backend';

    const HTML5toTouch = {
  backends: [
    {
      backend: HTML5Backend,
    },
    {
      backend: TouchBackend({
        enableMouseEvents: true,
        enableTouchEvents: true,
        touchSlop: 20,
      }), // Note that you can call your backends with options
      preview: true,
      transition: TouchTransition,
    },
  ],
};

export default DragDropContext(MultiBackend(HTML5toTouch))(MyPage);

2) При использовании [TouchBackend] + [HTML5Backend] + [Modernizr] : при таком перетаскивании кода на сенсорные устройства неработа : 

export default DragDropContext(
  Modernizr.touchevents ? TouchBackend : HTML5Backend,
)(MyPage);

3) Я пытался добавить Preview , но он не отслеживает при перетаскивании : 

import MultiBackend, {
  TouchTransition,
  Preview,
} from 'react-dnd-multi-backend';

  const generatePreview = (object) => (
        <div style={{ backgroundColor: 'red' }}>Generated</div>
      );
<Preview generator={generatePreview} />

1 Ответ

2 голосов
/ 26 апреля 2019

Обязательно включите опору стиля в ваш сгенерированный <div>. Если вы этого не сделаете, ваш предварительный просмотр не будет перемещаться по странице. Он включает в себя стиль, который обновляется при перетаскивании элемента.

Таким образом, ваш код будет обновлен до: 

const generatePreview = (type, item, style) => (
       return <div style={style}>Generated</div>;
  );
<Preview generator={generatePreview} />

Я ссылался на несколько файлов в репозитории: preview / examples / App.js и Reaction-dnd-preview / src / index.js

...