Как указать дочерний компонент для перетаскивания его родительского компонента в React?

Question

В настоящее время я работаю над проектом эмулятора терминала с использованием React и стилевых компонентов. Я хочу добавить функцию перетаскивания в терминал. Все хорошо, кроме одного: я хочу нажать и удерживать строку заголовка, чтобы перетащить терминал, а не куда-нибудь еще.

Вот мой базовый компонент: https://codesandbox.io/s/still-http-jxxex

Я не хочу использовать какие-либо плагины или библиотеки, потому что я хочу знать, как это работает. Так есть ли способы достичь этого только с помощью React и javascript? Все комментарии приветствуются.

Answer 1

После нескольких дней поиска я обнаружил, что проблема в том, что я вызвал onMouseDown в окне (глобально).

Для этого я использую функцию, которая передается дочернему компоненту для обновления состояния его родительского компонента, то есть onMouseDown, затем избавились от функции в useEffect.

Вот мое окончательное решение: https://codesandbox.io/s/admiring-liskov-puu6g

Answer 2

Ну, после чтения MDN документов вот очень упрощенная версия D & D (остальное зависит от вас, поэтому, пожалуйста, прочитайте документы):

ссылка на codesanbox

Ниже приведен пример MDN моего ответа, основанный на:

    <script>
function dragstart_handler(ev) {
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("application/my-app", ev.target.id);
 ev.dataTransfer.dropEffect = "move";
}
function dragover_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 const data = ev.dataTransfer.getData("application/my-app");
 ev.target.appendChild(document.getElementById(data));
}
</script>

<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>