कई लोगों की तरह, मेरे पास सॉर्ट करने योग्य कार्डों की एक सूची है। मेरे मामले में, प्रत्येक कार्ड एक ब्लॉग पोस्ट का सामग्री ब्लॉक है और इनमें से कुछ कोड स्निपेट हैं जो react-codemirror । स्निपेट्स के लिए ड्रैग प्रीव्यू में एक बड़ी सफेद पृष्ठभूमि शामिल थी जो कोडमिरर के कोड एडिटर के भीतर टेक्स्ट की चौड़ाई और ऊंचाई के बराबर थी। यह अवांछनीय था इसलिए मैंने इसे सीएसएस के साथ ठीक करने की कोशिश की लेकिन कोई भाग्य नहीं था, और जैसा कि मैंने अधिक दस्तावेज पढ़ा है, मुझे लगता है कि यह संभव नहीं है क्योंकि डीएनडी किसी भी नए वर्ग या शैलियों को लागू करने से पहले डोम नोड को स्क्रीनशॉट कर रहा है (कृपया मुझे सही करें अगर यह निश्चित रूप से गलत है)

क्योंकि मुझे काम करने के लिए सीएसएस नहीं मिला, मैंने पूर्वावलोकन के लिए कुछ अलग दिखाने के लिए एक कस्टम ड्रैग लेयर का उपयोग करने का प्रयास किया। यह बहुत अच्छा काम करता है सिवाय ड्रैगिंग के वास्तव में तड़का हुआ हो जाता है जहां यह वास्तव में पहले काफी चिकना था।

मेरे द्वारा अभी-अभी बताई गई समस्या को प्रदर्शित करने वाला एक वीडियो यहां दिया गया है:

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)

मुझे बताएं कि क्या आपको इससे अधिक कोड देखने की ज़रूरत है, मुझे लगता है कि यह पर्याप्त होना चाहिए।

या तो क) मैं सफेद पृष्ठभूमि को छिपाने के लिए सीएसएस का उपयोग कैसे कर सकता हूं या बी) कस्टम ड्रैग पूर्वावलोकन को अधिक सुचारू रूप से खींचने के लिए बहुत सराहना की जाएगी!

ध्यान दें कि यह काम प्रतिक्रिया/रेडक्स के साथ ऐप्स बनाने पर एक स्क्रीनकास्ट कोर्स का हिस्सा है और मैं प्रतिक्रिया-डीएनडी पर शायद 2-3 लघु वीडियो करने की योजना बना रहा हूं ताकि यह दिखाया जा सके कि सॉर्ट करने योग्य सामग्री ब्लॉक कार्ड कैसे कार्यान्वित किए जाते हैं। उन्हें जल्द से जल्द रिहा करने की उम्मीद है!