1. Home
  2. Forum
  3. ReactJS
  4. Issue on Implementing External Drag and Drop

Issue on Implementing External Drag and Drop

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

7 Replies 1 reply marked as answer
PN Praveenkumar Narasimhanaidu Syncfusion Team November 5, 2020 10:23 AM UTC

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. 
 
 
[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. 


Marked as answer
PJ Paul Jackson February 16, 2022 09:11 PM UTC

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!


SK Satheesh Kumar Balasubramanian Syncfusion Team February 17, 2022 12:24 PM UTC

Hi Paul, 
  
We suggest you to use the below customization to highlight the cell. 
  
  
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 


PJ Paul Jackson February 21, 2022 06:13 AM UTC

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.


SK Satheesh Kumar Balasubramanian Syncfusion Team February 22, 2022 04:01 PM UTC

Hi Paul, 
  
We suggest you to use the below customization to highlight the cell. 
  
  
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 


PJ Paul Jackson February 23, 2022 08:59 PM UTC

Thank you! 
That worked well. 


VM Vengatesh Maniraj Syncfusion Team February 24, 2022 09:21 AM UTC

You are most welcome!!!


Loader.
Up arrow icon