React-dnd: Passen Sie den Cursor beim Ziehen an

Erstellt am 5. Nov. 2015  ·  15Kommentare  ·  Quelle: react-dnd/react-dnd

Fantastische Bibliothek! Vielen Dank für all Ihre harte Arbeit beim Zusammenstellen. Ich habe eine kurze Frage: Ist es möglich, den Cursor so anzupassen, dass während eines Ziehvorgangs der Cursor immer auf dasselbe gesetzt ist (insbesondere möchte ich ihn auf das Symbol _dragging_ setzen)?

Mit anderen Worten, unabhängig davon, ob Sie sich über einer Drop-Zone befinden oder nicht, bleibt der Cursor derselbe. Dies ähnelt beispielsweise dem Ziehen des Cursors durch Trello beim Ziehen einer Notiz.

Danke im Voraus!

question

Hilfreichster Kommentar

Hat es jemand geschafft, das zu lösen?

Alle 15 Kommentare

Sie können wahrscheinlich einen cursor -Stil für den gesamten Körper (oder den Anwendungsstamm div ) festlegen, während isDragging true . Sie können DragLayer , um isDragging Änderungen anzuhören.

Danke, ich wünschte das hätte funktioniert! Leider wird der Cursorstil von etwas überschrieben (ich bin in Chrome), selbst wenn der Cursorstil auf document.body gesetzt und als "! Wichtig" markiert wird. Irgendwelche anderen Ideen?

Vielleicht funktioniert die Drag & Drop-API von HTML5 nur so. In diesem Fall besteht die einzige Lösung darin, ein benutzerdefiniertes Backend zu erstellen, das Mausereignisse anstelle von HTML5-Drag & Drop-Ereignissen verwendet.

Ich hatte gehofft, dass du das nicht sagen würdest :) Danke!

Ich habe gerade von diesem Problem erfahren. Leider scheint es nicht möglich zu sein, das Symbol beim Ziehen zu ändern :(

Hat es jemand geschafft, das zu lösen?

Ging auch und schaute in diese. Ja, es scheint, dass dies leider eine Browser-Einschränkung ist, da die API für DataTransfer.effectAllowed nur eine Handvoll Optionen unterstützt:

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed

Die einzige Möglichkeit, dies zu umgehen , besteht, wie Benutzer möglicherweise nicht intuitiv ist.

Nun, eine sehr falsche, aber funktionierende Lösung wäre das Hinzufügen einer dragging -Klasse zum Körper, so dass der Körper und jedes DOM-Objekt im Körper cursor: grabbing !important . Nichts wird es außer Kraft setzen.
Das hat bei mir funktioniert:

:global {
    body.dragging,
    body.dragging * {
        cursor: url('./assets/cursors/grabbing.cur'), move !important;
    }
}

Ein anderer Ansatz mit JS könnte etwa so aussehen:

window.addEventListener('drag', () => {
  document.body.style.cursor = 'grabbing';
}, true)

Es scheint jedoch nicht konsequent zu funktionieren ...

Ich kann keine der hier vorgeschlagenen Lösungen zum Laufen bringen. Irgendwelche Updates dazu?

Der Wechsel zu TouchBackend und die Verwendung von CSS zum Setzen des Cursors haben bei mir funktioniert.

<DndProvider backend={TouchBackend} options={{ enableTouchEvents: false, enableMouseEvents: true }}>
  <div className=`my-app ${isDragging ? 'dragging' : ''}`>
      .... draglayers here
  </div>
</DndProvider>
.dragging {
  cursor: grabbing
}

Der Wechsel zu TouchBackend und die Verwendung von CSS zum Setzen des Cursors haben bei mir funktioniert.

<DndProvider backend={TouchBackend} options={{ enableTouchEvents: false, enableMouseEvents: true }}>
  <div className=`my-app ${isDragging ? 'dragging' : ''}`>
      .... draglayers here
  </div>
</DndProvider>
.dragging {
  cursor: grabbing
}

Ich arbeite nicht für mich

+1

hat es jemand geschafft, das zu lösen?

Der Wechsel zu TouchBackend und die Verwendung von CSS zum Setzen des Cursors haben bei mir funktioniert.

<DndProvider backend={TouchBackend} options={{ enableTouchEvents: false, enableMouseEvents: true }}>
  <div className=`my-app ${isDragging ? 'dragging' : ''}`>
      .... draglayers here
  </div>
</DndProvider>
.dragging {
  cursor: grabbing
}

Der Wechsel zu TouchBackend hat bei mir funktioniert

DnD-Anbieter:

import { DndProvider } from 'react-dnd';
import { TouchBackend } from 'react-dnd-touch-backend';

...
<DndProvider backend={TouchBackend} options={{enableMouseEvents: true}}>
...
</DndProvider>

Implementierung von Drag-Handlern:

    import { useDrag, useDrop } from 'react-dnd';
    ....

    const [...] = useDrag({
      ...
      begin: () => {
        document.body.classList.add('dragging');
        ...
     },
      end: () => {
        document.body.classList.remove('dragging');
        ...
      },
    });

CSS-Datei

   body.dragging: {
      cursor: crosshair !important;
   },
War diese Seite hilfreich?
5 / 5 - 1 Bewertungen