مثل الكثيرين ، لدي قائمة بالبطاقات القابلة للفرز. في حالتي ، كل بطاقة هي جزء من محتوى منشور مدونة وبعض هذه المقتطفات عبارة عن مقتطفات رمز يتم عرضها باستخدام react-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)

اسمحوا لي أن أعرف إذا كنت بحاجة لرؤية أي رمز أكثر من ذلك ، أعتقد أن هذا يجب أن يكون كافياً.

اقتراحات لأي من أ) كيف يمكنني استخدام css لإخفاء الخلفية البيضاء أو ب) جعل سحب معاينة السحب المخصص أكثر سلاسة سيكون موضع تقدير كبير!

لاحظ أن هذا العمل جزء من دورة screencast حول إنشاء تطبيقات ذات تفاعل / إعادة وأنني أخطط لعمل 2-3 مقاطع فيديو قصيرة على رد الفعل-dnd لإظهار كيفية تنفيذ بطاقات حظر المحتوى القابلة للفرز. على أمل إطلاق سراح هؤلاء في أسرع وقت ممكن!