Ad

React-dnd - Change Styling Of DropTargets On DragStart

- 1 answer

I got a app that shows multiple pages, which are dragable. As the content of those can get very long I want to show only the page-name and limit the height of the page to about 50px on beginDrag() and reset the height to auto on endDrag(). Unfortunately this doesnt work, the styles get just ignored. I think this happends because react-dnd needs to keep the proportion of the elements so it can handle the drop-targets and knows which component is at which position. Is there any other way to accomplish this?

Ad

Answer

If you use a dragPreview then it will use that instead of the screenshot-ed component, similar to what he does in the tutorial (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);
  }
}

(Note that you'll have to inject the connectDragPreview through the collector like he did as well)

Ad
source: stackoverflow.com
Ad