Comme beaucoup, j'ai une liste de cartes triables. Dans mon cas, chaque carte est un bloc de contenu d'un article de blog et certains d'entre eux sont des extraits de code rendus avec react-codemirror . L'aperçu de glissement pour les extraits incluait un grand fond blanc qui était égal à la largeur et à la hauteur du texte dans l'éditeur de code de codemirror. Ce n'était pas souhaitable, j'ai donc essayé de le réparer avec CSS mais sans succès, et alors que je lis plus de documentation, je pense que ce n'est pas possible car dnd effectue une capture d'écran du nœud dom avant que de nouvelles classes ou de nouveaux styles ne puissent y être appliqués (veuillez me corriger si c'est faux bien sur)

Parce que je ne pouvais pas faire fonctionner CSS, j'ai essayé d'utiliser un calque de glissement personnalisé pour afficher quelque chose de différent pour l'aperçu. Cela fonctionne très bien, sauf que le glissement devient vraiment saccadé là où il était en fait assez fluide auparavant.

Voici une vidéo illustrant le problème que je viens de décrire :

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

Et je suppose que vous voudrez aussi voir du code. Voici mon calque de glissement personnalisé

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)

Voici les options de configuration pour la source de glisser et la cible de dépôt

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()
  }
}

Et voici le composant Card qui est déplacé

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)

Faites-moi savoir si vous avez besoin de voir plus de code que cela, je pense que cela devrait être suffisant.

Des suggestions pour a) comment je pourrais utiliser css pour masquer l'arrière-plan blanc ou b) rendre l'aperçu du glissement personnalisé plus fluide seraient très appréciées !

Notez que ce travail fait partie d'un cours de screencast sur la création d'applications avec react/redux et que je prévois de faire probablement 2-3 courtes vidéos sur react-dnd pour montrer comment les cartes de blocage de contenu triables sont implémentées. En espérant les publier au plus vite !