Wie viele habe ich eine Liste mit sortierbaren Karten. In meinem Fall ist jede Karte ein Inhaltsblock eines Blogposts und einige davon sind Codeschnipsel, die mit react-codemirror gerendert werden. Die Ziehvorschau für die Snippets enthielt einen großen weißen Hintergrund, der der Breite und Höhe des Textes im Code-Editor von codemirror entsprach. Dies war unerwünscht, also habe ich versucht, es mit CSS zu reparieren, hatte aber kein Glück, und als ich mehr Dokumentation lese, denke ich, dass dies nicht möglich ist, da dnd einen Screenshot des dom-Knotens erstellt, bevor neue Klassen oder Stile darauf angewendet werden können (bitte korrigieren Sie mich .) wenn das natürlich falsch ist)

Da ich CSS nicht zum Laufen bringen konnte, habe ich versucht, eine benutzerdefinierte Drag-Ebene zu verwenden, um etwas anderes für die Vorschau anzuzeigen. Das funktioniert großartig, außer dass das Ziehen wirklich abgehackt wird, wo es vorher eigentlich ziemlich glatt war.

Hier ist ein Video, das das gerade beschriebene Problem demonstriert:

https://drive.google.com/file/d/0Bzbw-6Q_sVTySUNiNmJGcFVIQ00/view?usp=sharing

Und ich nehme an, Sie möchten auch etwas Code sehen. Hier ist mein benutzerdefinierter Drag-Layer

import React, { Component, PropTypes } from 'react'
import { DragLayer } from 'react-dnd'

function collect(monitor) {
  return {
    item: monitor.getItem(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging()
  }
}

const layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '20%',
  height: '100%'
}

function getItemStyles(props) {
  var currentOffset = props.currentOffset
  if (!currentOffset) {
    return {
      display: 'none'
    }
  }

  var x = currentOffset.x
  var y = currentOffset.y
  var transform = 'translate(' + x + 'px, ' + y + 'px)'
  return {
    transform: transform,
    WebkitTransform: transform
  }
}

class CardDragLayer extends Component {
  static propTypes = {
    item: PropTypes.object
  }

  render() {
    const { item, isDragging } = this.props

    if (!isDragging)
      return false

    return (
      <div style={layerStyles}>
        <div className='drag-preview' style={getItemStyles(this.props)}>
          <i className='fa fa-hand-scissors-o fa-6'></i>
        </div>
      </div>
    )
  }
}

export default DragLayer(collect)(CardDragLayer)

Hier sind die Konfigurationsoptionen für das Drag Source & Drop-Ziel

export const cardSource = {
  beginDrag(props) {
    return {
      index: props.index
    }
  }
}

export const cardTarget = {
  hover(props, monitor, component) {
    const dragIndex = monitor.getItem().index
    const hoverIndex = props.index

    if (dragIndex === hoverIndex)
      return

    props.swap(dragIndex, hoverIndex)
    monitor.getItem().index = hoverIndex;
  }
}

export function collectSource(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  }
}

export function collectTarget(connect) {
  return {
    connectDropTarget: connect.dropTarget()
  }
}

Und hier ist die Card Komponente, die gezogen wird

import React, { PropTypes, Component } from 'react'
import { Snippet, Markdown } from './Show'
import { DragSource, DropTarget } from 'react-dnd'
import { getEmptyImage } from 'react-dnd-html5-backend'
import { cardSource, cardTarget, collectSource, collectTarget } from './dragDropConfig'
import classnames from 'classnames'

class SnippetCard extends Component {
  options() {
    return {
      readOnly: true,
      scrollbarStyle: 'null',
      viewportMargin: Infinity
    }
  }

  render() {
    const { language, text } = this.props
    return(
      <Snippet
        options={this.options()}
        language={language.value}
        text={text.value} />
    )
  }
}

class MarkdownCard extends Component {
  render() {
    const { text } = this.props
    return (
      <div className='markdown-card'>
        <div className='card-content'>
          <Markdown text={text.value} />
        </div>
      </div>
    )
  }
}

const components = {
  snippet: SnippetCard,
  markdown: MarkdownCard
}

class Card extends Component {
  static propTypes = {
    connectDragSource: PropTypes.func.isRequired,
    connectDropTarget: PropTypes.func.isRequired,
    index: PropTypes.number.isRequired,
    block: PropTypes.object.isRequired,
    swap: PropTypes.func.isRequired
  }

  componentDidMount() {
    const { connectDragPreview } = this.props
    connectDragPreview(getEmptyImage(), {
      captureDraggingState: true
    })
  }

  render() {
    const { isDragging, block, connectDragSource, connectDropTarget } = this.props
    const Component = components[block.format.value]
    const classes = classnames('card', {
      dragging: isDragging
    })

    return connectDragSource(connectDropTarget((
      <div className={classes}>
        <div className='card-header'>
          <div>
            <label>
              {block.format.value}
            </label>
          </div>
          <Component {...block} />
        </div>
      </div>
    )))
  }
}

const Source = DragSource('card', cardSource, collectSource)(Card)
export default DropTarget('card', cardTarget, collectTarget)(Source)

Lassen Sie es mich wissen, wenn Sie mehr Code sehen möchten, ich denke, dies sollte ausreichen.

Vorschläge für entweder a) wie ich CSS verwenden könnte, um den weißen Hintergrund auszublenden oder b) die benutzerdefinierte Drag-Vorschau glatter zu machen, wären sehr dankbar!

Beachten Sie, dass diese Arbeit Teil eines Screencast-Kurses zum Erstellen von Apps mit React/Redux ist und ich plane, wahrscheinlich 2-3 kurze Videos zu React-dnd zu machen, um zu zeigen, wie die sortierbaren Inhaltsblockkarten implementiert werden. In der Hoffnung, diese so schnell wie möglich veröffentlichen zu können!