0

I promised myself never to write a StackExchange post with lots of code. But here we go.

I am basically trying to get some basic drag-and-drop behavior working in an SPFX (1.9.1) web-part using react-dnd.

Everything works as expected in the workbench - but as soon as I move the code to a live site (workbench and not-workbench) the onDrop will no longer fire (but the rest of the behavior works as expected.

I have no real exceptions (that I can see), no weird console stuff. it just refuses to trigger.

Any idea why? Got experiences with SPFX and react-dnd?

Here is my code - you can just replace your HelloWorld.tsx with this, and npm install react-dnd and react-dnd-html5-backend.

import * as React from 'react';
import styles from './HelloWorld.module.scss';
import { IHelloWorldProps } from './IHelloWorldProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { DndProvider } from 'react-dnd'
import HTML5Backend from "react-dnd-html5-backend";

import { useDrag, DragSourceMonitor } from 'react-dnd'
import { useDrop } from 'react-dnd'


export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
      <div className={ styles.helloWorld }>
            <DndProvider backend={HTML5Backend}>
                <Content></Content>
            </DndProvider>
      </div>
    );
  }
}

export interface Props {
  children?: React.ReactNode
}

export interface State {
}

class Content extends React.Component<Props, State> {

  constructor(props: Props) {
    super(props)

    this.state = {
    }
  }

  render() {
    return (
      <div>
        <div style={{ overflow: 'hidden', clear: 'both' }}>
          <Dustbin />
        </div>
        <Box name={"test"}></Box>
      </div>
    )
  }
}

const style: React.CSSProperties = {
  height: '12rem',
  width: '12rem',
  marginRight: '1.5rem',
  marginBottom: '1.5rem',
  color: 'white',
  padding: '1rem',
  textAlign: 'center',
  fontSize: '1rem',
  lineHeight: 'normal',
  float: 'left',
}

const Dustbin: React.FC = () => {
  const [{ canDrop, isOver }, drop] = useDrop({
    accept: 'Box',
    drop: () => ({ name: 'Dustbin' }),
    collect: monitor => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  })

  const isActive = canDrop && isOver
  let backgroundColor = '#222'
  if (isActive) {
    backgroundColor = 'darkgreen'
  } else if (canDrop) {
    backgroundColor = 'darkkhaki'
  }

  return (
    <div ref={drop} style={{ ...style, backgroundColor }}>
      {isActive ? 'Release to drop' : 'Drag a box here'}
    </div>
  )
}


const style1: React.CSSProperties = {
  border: '1px dashed gray',
  backgroundColor: 'white',
  padding: '0.5rem 1rem',
  marginRight: '1.5rem',
  marginBottom: '1.5rem',
  cursor: 'move',
  float: 'left',
}

interface BoxProps {
  name: string
}

const Box: React.FC<BoxProps> = ({ name }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { name, type: 'Box' },
    end: (item: { name: string } | undefined, monitor: DragSourceMonitor) => {
      const dropResult = monitor.getDropResult()
      if (item && dropResult) {
        console.log(`You dropped ${item.name} into ${dropResult.name}!`)
      }
    },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const opacity = isDragging ? 0.4 : 1

  return (
    <div ref={drag} style={{ ...style1, opacity }}>
      {name}
    </div>
  )
}
  • Can you please check what you have set to isDomainIsolated property in the config\package-solution.json file? read and try my answer given here. – Ganesh Sanap Oct 23 '19 at 13:48
  • Changing isDomainIsolated did not do the trick. But I found noticed something else - when we are in edit mode, it does not work, when we go to Preview (button upper right corner) it does work as expected. I am not sure what the functional difference between the two rendering modes is... but will continue to look into it. – Daniel Kloyberkatsky Oct 30 '19 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.