prevent dragging out of the window

[Sajid [Not Provided]]

• I have set up the external drag and drop scheduler using javascript
• when we drag the item from the right side of the section from the list and drag a bit on the right side it goes out of the screen
• how can we prevent it to go drag out of the screen while dragging?
• screenshot attached

Attachment: Screenshot_1_e3f30d40.zip

[Balasubramanian Sattanathan]

Hi Sajid,   

Greetings from Syncfusion Support. 

We have provided dragArea property in the TreeView component. When specifying the target class name in dragArea property, it will restrict the draggable element moving outside the target element. By default, the draggable element (dragged node element) movement occurs on the entire page.  

  

Please refer to the below code snippet to overcome the reported problem.  

  

var treeObj = new ej.navigations.TreeView({  

  fields: { dataSource: waitingList, id: "Id", text: "Name" },  

  allowDragAndDrop: true,  

  nodeDragStop: onTreeDragStop,  

  nodeDragging: onItemDrag,  

  nodeTemplate: "#treeTemplate",  

  cssClass: "treeview-external-drag",  

  dragArea: ".content-wrapper"  

});  

treeObj.appendTo("#Tree");  

  

Sample: https://stackblitz.com/edit/awxr6o-fxuzw4?file=index.js  

Kindly try the above solution and let us know if you need any further assistance.  

Regards,   

Balasubramanian S

[Anass]

How i can resolve it in angular !? 

[Satheesh Kumar Balasubramanian]

Hi Anass, 

  

Thanks for your update. 

  

We have validated your reported query "How i can resolve it in angular !?" and provided same dragArea property in the angular treeview sample to resolve this issue. 

  

Sample: https://stackblitz.com/edit/angular-prevent-dragging-out-of-window?file=app.component.html 

  

app.component.html:   

<ejs-treeview #treeObj [fields]='field' cssClass='treeview-external-drag' dragArea=".drag-sample-wrapper" 

                [allowDragAndDrop]='allowDragAndDrop' (nodeDragStop)="onTreeDragStop($event)" 

                (nodeDragging)="onItemDrag($event)"> 

</ejs-treeview> 

  

Kindly try the above solution and let us know if your need any further assistance. 

  

Regards, 

Satheesh Kumar B