Seperti banyak orang, saya memiliki daftar kartu yang dapat diurutkan. Dalam kasus saya, setiap kartu adalah blok konten dari posting blog dan beberapa di antaranya adalah cuplikan kode yang dirender dengan react-codemirror . Pratinjau seret untuk cuplikan menyertakan latar belakang putih besar yang sama dengan lebar dan tinggi teks dalam editor kode codemirror. Ini tidak diinginkan jadi saya mencoba memperbaikinya dengan CSS tetapi tidak berhasil, dan ketika saya membaca lebih banyak dokumentasi, saya pikir itu tidak mungkin karena dnd sedang mengambil tangkapan layar simpul dom sebelum kelas atau gaya baru dapat diterapkan padanya (tolong perbaiki saya jika itu salah tentu saja)

Karena saya tidak dapat menjalankan css, saya mencoba menggunakan lapisan seret khusus untuk menampilkan sesuatu yang berbeda untuk pratinjau. Ini berfungsi dengan baik kecuali menyeret menjadi sangat berombak di mana sebenarnya cukup mulus sebelumnya.

Berikut adalah video yang menunjukkan masalah yang baru saja saya jelaskan:

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

Dan saya kira Anda juga ingin melihat beberapa kode. Ini adalah lapisan seret khusus saya

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)

Berikut adalah opsi konfigurasi untuk sumber drag & drop target

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

Dan inilah komponen Card yang sedang diseret

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)

Beri tahu saya jika Anda perlu melihat kode lebih dari itu, saya pikir ini sudah cukup.

Saran untuk a) bagaimana saya bisa menggunakan css untuk menyembunyikan latar belakang putih atau b) membuat drag preview drag kustom lebih lancar akan sangat dihargai!

Perhatikan bahwa pekerjaan ini adalah bagian dari kursus screencast tentang membangun aplikasi dengan react/redux dan saya berencana untuk membuat 2-3 video pendek tentang react-dnd untuk menunjukkan bagaimana kartu blok konten yang dapat diurutkan diimplementasikan. Berharap untuk merilisnya sesegera mungkin!