0

I have a react-big-calendar and a button create, which when I click on it, I have a blueprint dialog will be open, I want this will be draggable anywhere.

My dialog is : enter image description here

My code is :

https://codesandbox.io/s/sharp-shockley-tt9bc

How to make it draggable ?

Ichrak Mansour
  • 1,850
  • 11
  • 34
  • 61

1 Answers1

1

What you have to do is: 1. Make the div of Dialog draggable as 2. Apply onDrag event on the same div, and pass a function, and the function would do something like:

handleDragEvent = (event) => {
    this.setState({
        positionX: event.clientX,
        positionY: event.clientY,
    })
}

And then you need to give these cooridnates to your dialogues as a starting position. You may need some polishing on the above stated function as per your need.

MubashirEbad
  • 289
  • 1
  • 7
  • How can use it on the dialog ? – Ichrak Mansour Oct 15 '19 at 08:24
  • When you inspect the model, you have a div with *class=bp3-overlay bp3-overlay-open bp3-overlay-scroll-container*, you have to override it and remove the *position:absolute* and remove it. and apply your own margining system. And apply margin-top and margin-left the same values as in state positionX and positionY. – MubashirEbad Oct 15 '19 at 09:09