reagieren-dnd: Überprüfen Sie, ob geschleppt Quelle in geordneten Liste vor der nach dem ursprünglichen Platz ist

Question

Ich verwende react-dnd. Ich möchte wissen, ob das aktuell verschobene Ziel vor oder nach der gezogenen Quelle in einer geordneten Liste von dnd-dom-Objekten liegt, und dieses an das dom-Objekt als css-Klasse übergeben. Ich möchte Requisiten zwischen Quelle und Ziel für meine eigenen Funktionen vergleichen können.

Wie kann ich benutzerdefinierte Quelle-Ziel-Relation-Funktionen (wie isOver, Candrop, usw.)? Ich möchte eine isBeforeDraggedSource() - Funktion erstellen.

Answer 1

Anders als Forking die Bibliothek Ich glaube nicht, Sie benutzerdefinierte Beziehungen wie das schaffen können, aber man konnte die collect Funktion ändern Sie Ihre eigene Beziehung zu erstellen. so etwas wie

static collect = (connect, monitor) => { 
    return { 
    isBeforeDraggedSource: <my function>  
    } 
} 

Sie können dann mit monitor.getItem(), vergleichen sie gegen die Requisiten und gehen von dort die zur Zeit gezogene Element erhalten werden könnte. Und wenn Sie die Requisiten des aktuell gezogenen Objekts haben möchten, geben Sie sie einfach als Teil des gezogenen Objekts ein. Umgekehrt könnten Sie getItem einfach durch das Collect geben und dann innerhalb von render verwenden, um seine Requisiten mit den aktuellen Requisiten zu vergleichen.