많은 사람들과 마찬가지로 나에게도 정렬 가능한 카드 목록이 있습니다. 제 경우에는 각 카드가 블로그 게시물의 콘텐츠 블록이고 이 중 일부는 react-codemirror 렌더링된 코드 조각입니다. 스니펫에 대한 드래그 미리보기에는 codemirror의 코드 편집기 내 텍스트의 너비 및 높이와 동일한 큰 흰색 배경이 포함되었습니다. 이것은 바람직하지 않아 CSS로 수정하려고 시도했지만 운이 없었습니다. 더 많은 문서를 읽으면서 새로운 클래스나 스타일이 적용되기 전에 dnd가 dom 노드를 스크린샷하기 때문에 불가능하다고 생각합니다. 물론 그것이 잘못된 경우)

CSS를 작동할 수 없었기 때문에 사용자 정의 드래그 레이어를 사용하여 미리보기에 대해 다른 것을 표시하려고 했습니다. 이것은 이전에 실제로 매우 부드러웠던 드래그가 실제로 고르지 않게 되는 것을 제외하고는 훌륭하게 작동합니다.

다음은 방금 설명한 문제를 보여주는 비디오입니다.

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

그리고 나는 당신이 또한 몇 가지 코드를 보고 싶어할 것이라고 생각합니다. 여기 내 사용자 정의 드래그 레이어가 있습니다

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)

드래그 소스 및 드롭 대상에 대한 구성 옵션은 다음과 같습니다.

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

그리고 여기에 드래그되는 Card 구성 요소가 있습니다.

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)

그보다 더 많은 코드가 필요하면 알려주십시오. 이 정도면 충분하다고 생각합니다.

a) CSS를 사용하여 흰색 배경을 숨기는 방법 또는 b) 사용자 정의 드래그 미리보기 드래그를 더 부드럽게 만드는 방법에 대한 제안은 매우 감사하겠습니다!

이 작업은 react/redux를 사용하여 앱을 빌드하는 스크린캐스트 과정의 일부이며 정렬 가능한 콘텐츠 블록 카드가 구현되는 방법을 보여주기 위해 react-dnd에서 2-3개의 짧은 비디오를 만들 계획입니다. 가능한 빨리 출시되기를 바랍니다!