React-dnd - 在 dragStart 上更改 dropTargets 的样式
React-dnd - change styling of dropTargets on dragStart
我有一个显示多个页面的应用程序,这些页面是可拖动的。由于这些内容可能会变得很长,我只想显示页面名称并将页面高度限制在 beginDrag()
上的大约 50px
并在 endDrag()
上将高度重置为自动.不幸的是,这不起作用,样式被忽略了。我认为发生这种情况是因为 react-dnd 需要保持元素的比例,以便它可以处理放置目标并知道哪个组件位于哪个位置。有没有其他方法可以做到这一点?
我不太确定我是否理解问题,但也许 connectDragPreview
可以帮助您?
一些有用的信息here
如果您使用 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)
我有一个显示多个页面的应用程序,这些页面是可拖动的。由于这些内容可能会变得很长,我只想显示页面名称并将页面高度限制在 beginDrag()
上的大约 50px
并在 endDrag()
上将高度重置为自动.不幸的是,这不起作用,样式被忽略了。我认为发生这种情况是因为 react-dnd 需要保持元素的比例,以便它可以处理放置目标并知道哪个组件位于哪个位置。有没有其他方法可以做到这一点?
我不太确定我是否理解问题,但也许 connectDragPreview
可以帮助您?
一些有用的信息here
如果您使用 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)