Issue on Implementing External Drag and Drop

[praveen]

Hi,

Is there any way to drag and drop external Html Div Element into Scheduler ?

All i need is to open a popup form whenever i drop a external html div element into each date cell.

I've also attached an image of an project in which i want to open a popup form whenever i drag and drop the TEST named div element into respective date cell.

Thanks,

Attachment: tempsnip_c02a1279.rar

[Praveenkumar Narasimhanaidu]

Hi Praveen, 

Greetings from syncfusion support..! 

Yes, we can drag and drop external HTML div element to the scheduler. We have prepared a sample for your reference as per your requirement which can be viewed from the following link. 

 

Sample: https://stackblitz.com/edit/react-external-drag-drop-evfvzd?file=index.html 

 

[index.js] 

 

componentDidMount() { 

    let draggable = new Draggable(document.getElementById("draggable"), { 

      clone: false 

    }); 

    let droppable = new Droppable(document.getElementById("droppable"), { 

      drop: e => { 

        var obj = document.getElementsByClassName("e-schedule")[0] 

          .ej2_instances[0]; 

        let data = obj.getCellDetails(e.target); 

        let Appointment = { 

          Subject: "New Event", 

          StartTime: data.startTime, 

          EndTime: data.endTime, 

          IsAllDay: data.isAllDay 

        }; 

        obj.openEditor(Appointment, "Add", true); 

        document.querySelector("#draggable").remove(); 

      } 

    }); 

  } 

 

 

You can also refer the following UG and online demo. 

UG:https://ej2.syncfusion.com/react/documentation/schedule/appointments/#drag-and-drop-items-from-external-source 

Demo:https://ej2.syncfusion.com/react/demos/#/material/schedule/external-drag-drop 

Kindly get back to us, if you need any further assistance. 

Regards, 

Praveenkumar. 

[Paul Jackson]

Is it possible to highlight which cell you are dropping the item on? 
With this example when you are moving the draggable object on the calendar, the underlying cell is not highlighted so it is not clear enough on which cell the object will be dropped, is there any way to highlight cells as you are moving the object over the cells?

Thank you!

[Satheesh Kumar Balasubramanian]

Hi Paul, 

  

We suggest you to use the below customization to highlight the cell. 

  

https://stackblitz.com/edit/react-schedule-highlight-cell?file=index.js 

  

index.js: 

  dragStop(event) { 

    if (this.previousEventTarget) { 

      removeClass([this.previousEventTarget], 'highlight'); 

    } 

  } 

  onItemDrag(event) { 

    if (event.name == 'drag') { 

      if (this.previousEventTarget) { 

        removeClass([this.previousEventTarget], 'highlight'); 

      } 

      //   console.log('drag', event); 

      this.previousEventTarget = event.event.target; 

      if (event.event.target.classList.contains('e-work-cells')) { 

        addClass([event.event.target], 'highlight'); 

      } 

    } 

    if (this.scheduleObj.isAdaptive) { 

      console.log('inside schedule adaptive'); 

      let classElement = 

        this.scheduleObj.element.querySelector('.e-device-hover'); 

      if (classElement) { 

        classElement.classList.remove('e-device-hover'); 

      } 

      if (event.target.classList.contains('e-work-cells')) { 

        console.log('target element', event.target); 

        addClass([event.target], 'e-device-hover'); 

      } 

    } 

    if (document.body.style.cursor === 'not-allowed') { 

      document.body.style.cursor = ''; 

    } 

    if (event.name === 'nodeDragging') { 

      let dragElementIcon = document.querySelectorAll( 

        '.e-drag-item.treeview-external-drag .e-icon-expandable' 

      ); 

      for (let i = 0; i < dragElementIcon.length; i++) { 

        dragElementIcon[i].style.display = 'none'; 

      } 

      let scheduleElement = closest(event.target, '.e-work-cells'); 

      //   console.log('adaptive?', event.target); 

      if (this.previousEventTarget) { 

        removeClass([this.previousEventTarget], 'highlight'); 

      } 

      if (event.target.classList.contains('e-work-cells')) { 

        this.previousEventTarget = event.target; 

        addClass([event.target], 'highlight'); 

      } 

    } 

  } 

  onTreeDragStop(event) { 

    if (this.previousEventTarget) { 

      removeClass([this.previousEventTarget], 'highlight'); 

    } 

  } 

  

index.css: 

.e-schedule .e-timeline-view .e-work-cells.highlight { 

  background-color: black !important; 

} 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[Paul Jackson]

Thank you, but I am not using TreeViewComponent, I was hoping to implement the same behavior using an external component such as the one you provided in this example:  https://stackblitz.com/edit/react-external-drag-drop-evfvzd?file=index.html 

Thanks again.

[Satheesh Kumar Balasubramanian]

Hi Paul, 

  

We suggest you to use the below customization to highlight the cell. 

  

https://stackblitz.com/edit/react-external-drag-drop-evfvzd-erbx3a?file=index.js 

  

index.js:  

  componentDidMount() { 

    let draggable = new Draggable(document.getElementById('draggable'), { 

      clone: false, 

      drag: (e) => { 

        if (this.previousEventTarget) { 

          removeClass([this.previousEventTarget], 'highlight'); 

        } 

        this.previousEventTarget = e.target; 

        if (e.target.classList.contains('e-work-cells')) { 

          addClass([e.target], 'highlight'); 

        } 

      }, 

      dragStop: (e) => { 

        if (this.previousEventTarget) { 

          removeClass([this.previousEventTarget], 'highlight'); 

        } 

      }, 

    }); 

  } 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[Paul Jackson]

Thank you! 
That worked well. 

[Vengatesh Maniraj]

You are most welcome!!!