Drag and Drop Issue

[Ayyappan]

I would to like to drag and drop in (up and down) and (left to right) order.Ex.

I have a list of div's in leftside and rightside. I would to like to drag a leftside div and drop in rightside. And i can also drag a leftside div and drop a leftside div(up and down order). Please assist me.

For left-side:

Code: Select all

<div class="colum-12 fileds-container drag-column" *ngFor="let section of sections" id="left-side-section-{{section.id}}" #dragAndDropDiv pDraggable="sections" (onDragStart)="dragStart($event,section)" (onDragEnd)="dragEnd($event)">
                    <div class="colum-12 drop-fields">
                        {{section.name}}
                    </div>                    
                </div>

For right-side:

Code: Select all

<div class="row m-row--no-padding align-items-center">
                            <div class="col">
                                <h3 class="m-widget1__title">{{section.id}}</h3>
                                <span class="m-widget1__desc">{{section.name}}</span>
                            </div>
                            <button id="deleteSection" (click)="deleteSection(section, section_index)" title="{{l('Delete')}}" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill" href="javascript:;">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>

[yigitfindikli]

I would to like to drag and drop in (up and down) and (left to right) order.Ex.

I have a list of div's in leftside and rightside. I would to like to drag a leftside div and drop in rightside. And i can also drag a leftside div and drop a leftside div(up and down order). Please assist me.

For left-side:

Code: Select all

<div class="colum-12 fileds-container drag-column" *ngFor="let section of sections" id="left-side-section-{{section.id}}" #dragAndDropDiv pDraggable="sections" (onDragStart)="dragStart($event,section)" (onDragEnd)="dragEnd($event)">
                    <div class="colum-12 drop-fields">
                        {{section.name}}
                    </div>                    
                </div>

For right-side:

Code: Select all

<div class="row m-row--no-padding align-items-center">
                            <div class="col">
                                <h3 class="m-widget1__title">{{section.id}}</h3>
                                <span class="m-widget1__desc">{{section.name}}</span>
                            </div>
                            <button id="deleteSection" (click)="deleteSection(section, section_index)" title="{{l('Delete')}}" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill" href="javascript:;">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>

Hi,
Here is example for you;
https://stackblitz.com/edit/github-2unz ... onent.html

Best Regards.