Drag&Drop: item goes out of the web page while dragging is off page border

[Dima]

I am developing Pivot table which contains fixed Field List. Field List item are draggable and everything works good. But also a can drag list items out of page border to the right and down. 

How can I make Field List items draggable in Field List container only?

Attachment: DragDrop_2aca36fc.rar

[Saranya Sivan]

Hi Dima,  

     

We are validating the reported requirement (To make field list items draggable in field list container only) at our end. We will update the further details within two business days (17th December).  

   

Regards,  

Saranya Sivan.  

[Saranya Sivan]

Hi Dima,          

Still we are validating the reported requirement (To make field list items draggable in field list container only) at our end. We will update the further details within two business days (21th December).    

     

Regards,    

Saranya Sivan.    

[Saranya Sivan]

Hi Dima, 

We are trying to provide the solution at sample level and we will update the details on 24^th December, 2020 

We appreciate your patience until then. 

Regards, 

Saranya Sivan. 

 

[Manikandan Murugesan]

Hi Dima, 

We have prepared a sample as per your requirement. 

Code Snippet: 

export class FieldList extends SampleBase { 

    onPivotDataBound() { 

      //To restrict field list buttons 

      var ele = this.fieldlistObj.element.querySelectorAll('.e-pivot-button'); 

            for (var i=0; i < ele.length; i++) { 

                ele[i].querySelector('.e-draggable').ej2_instances[0].dragArea = this.fieldlistObj.element; 

            } 

 

      // To restrict field list treeview elements 

            this.fieldlistObj.element.querySelectorAll('.e-field-list')[0].ej2_instances[0].dragArea = this.fieldlistObj.element; 

    } 

     

    render() { 

        return (<div className="control-pane"> 

                <div className="control-section" style={{ overflow: 'auto' }}> 

                    <PivotViewComponent id='PivotView' ref={d => this.pivotObj = d} dataBound={this.onPivotDataBound.bind(this)}></PivotViewComponent> 

                </div> 

            </div>); 

    } 

} 

 

Sample: https://stackblitz.com/edit/react-rzeygw?file=index.js 

Please let us know if you need further assistance on this. 

Thanks, 

Manikandan 

[Dima]

Hi Manikandan, 

Sorry for my delayed answer. 

Your solution hepled me to resolve issue with dragging out of the browser window Field List items.

Thanks a lot!

Regards, 

Dima Didusenko

[Saranya Sivan]

 

Hi Dima, 

 

Thanks for the reply. 

  

Please let us know if you have any other queries. We are always happy to assist you.  

  

Regards, 

Saranya Sivan.