Об этом проекте

React-Draggable — это библиотека React-компонентов для перетаскивания элементов. Она входит в организацию react-grid-layout и публикуется на npm как react-draggable. Библиотека предоставляет два компонента. `<Draggable>` оборачивает существующий элемент и расширяет его обработчиками событий перетаскивания и стилями, перемещая элементы через CSS Transforms, чтобы их можно было перетаскивать независимо от текущего позиционирования. Он не создаёт элемент-обёртку в DOM. `<DraggableCore>` — это низкоуровневый вариант для пользователей, которым нужен полный контроль: он предоставляет колбэки перетаскивания без управления состоянием или стилями и не задаёт трансформации, оставляя позиционирование разработчику. В README в качестве примеров использования DraggableCore указаны React-Resizable и React-Grid-Layout. Ключевые пропсы `<Draggable>` включают axis (both, x, y, none), bounds (parent, CSS-селектор или объект left/top/right/bottom), CSS-селекторы cancel и handle, привязку к сетке, position для контролируемого использования, positionOffset, scale для трансформированных родителей, disabled и колбэки onStart, onDrag, onStop и onMouseDown. DraggableData, передаваемый обработчикам, содержит node, x, y, deltaX, deltaY, lastX и lastY. Возврат false из onStart отменяет перетаскивание. Установка className, style или transform на `<Draggable>` является ошибкой; они должны быть у дочернего элемента. В README описана совместимость: версия 4.x поддерживает React 16.3+, 3.x поддерживает React 15–16, а 2.x поддерживает React 0.14–15. Типы TypeScript включены. Установка выполняется через npm или yarn, с примерами импорта ES-модулей и CommonJS. Отдельный раздел посвящён nodeRef: передача пропа nodeRef позволяет избежать предупреждений об устаревании ReactDOM.findDOMNode() в React Strict Mode, и в README показано, как пробрасывать и ref, и пропсы для пользовательских компонентов. Другой раздел объясняет контролируемое и неконтролируемое использование, показывая, как передать проп position для программного перепозиционирования, продолжая использовать управление состоянием Draggable. Раздел о Content Security Policy объясняет, что react-draggable при первом перетаскивании внедряет небольшой элемент style в head документа (поведение enableUserSelectHack, включённое по умолчанию), чтобы предотвратить выделение текста во время перетаскивания. При строгой CSP без 'unsafe-inline' в style-src это блокируется. Описаны три способа решения: передать проп nonce, положиться на глобальный резервный вариант webpack __webpack_nonce__ или установить enableUserSelectHack={false} и добавить два правила выделения в собственный файл стилей. nonce считывается только при первом создании элемента, и один и тот же элемент используется всеми Draggable/DraggableCore на странице. Репозиторий включает демо-сайт, changelog, CI-воркфлоу и инструкции по участию, охватывающие yarn dev, yarn test и чек-лист релиза с использованием целей make. Проект лицензирован по MIT.