React-dnd

Question

我有一个显示多个页面的应用程序，这些页面是可拖动的。由于这些内容可能会变得很长，我只想显示页面名称并将页面高度限制在 beginDrag() 上的大约 50px 并在 endDrag() 上将高度重置为自动.不幸的是，这不起作用，样式被忽略了。我认为发生这种情况是因为 react-dnd 需要保持元素的比例，以便它可以处理放置目标并知道哪个组件位于哪个位置。有没有其他方法可以做到这一点？

Answer 1

我不太确定我是否理解问题，但也许 connectDragPreview 可以帮助您？

一些有用的信息here

Answer 2

如果您使用 dragPreview，那么它将使用它而不是屏幕截图组件，类似于他在教程中所做的 (http://gaearon.github.io/react-dnd/docs-tutorial.html):

componentDidMount: function () {
  var connectDragPreview = this.props.connectDragPreview;
  var myPlaceholder = <Placeholder />  // A fake component with the height you want
  myPlaceholder.onload = function() {
    connectDragPreview(myPlaceholder);
  }
}

（请注意，您必须像他一样通过收集器注入 connectDragPreview）

React-dnd - 在 dragStart 上更改 dropTargets 的样式

React-dnd - change styling of dropTargets on dragStart

drag-and-drop

reactjs