[Question] How to sort dragged dropped elements

[maartentibau]

I have 2 columns.

In the left column I have multiple dnd-draggable elements. The right column is the DropZone, dragging and dropping the elements from the left to the right column works perfect.

But I would like to be able to sort the elements that have been dropped in the DropZone, is this possible?

[akserg]

Hi @webtrix Look at "Complex example (includes all shown above) with Drag-and-Drop" example in README:

     <div dnd-droppable (onDropSuccess)="addToBasket($event)" [dropZones]="['demo1']"
         class="panel panel-info">
         <div class="panel-heading">Shopping Basket<br>(to pay: \${{totalCost()}})</div>
         <div class="panel-body">
             <div *ngFor="#product of shoppingBasket" class="panel panel-default">
                 <div class="panel-body">
                 {{product.name}}<br>(ordered: {{product.quantity}}
                     <br>cost: \${{product.cost * product.quantity}})
                 </div>
             </div>
         </div>
     </div>

You need to add the listener function of the onDropSuccess event (onDropSuccess)="addToBasket($event)" into your code. The dragData of an $event contains the dropped value:

    addToBasket($event) {
        let newProduct: Product = $event.dragData;
        // First add it into the array
        this.shoppingBasket.push(new Product(newProduct.name, 1, newProduct.cost));
        // Sort an array based on name of Product
        this.shoppingBasket.sort((product1: Product, product2: Product) => {
           // The localeCompare() method compares two strings in the current locale.
           return product1.name.localeCompare(product2.name);
        });
    }

Angular will render it for you.

[maartentibau]

Hi @akserg

That's not what I mean, I want to be able to drag / sort the items dropped in the dropZone. I do not use a *ngFor to draw the dropped items, I create them dynamically in the onDropSuccess event

[akserg]

Can you share the code with explanation?

[maartentibau]

I'll try to make a plunk.

I've noticed that the dnd-sortable functionality only works when used in an *ngFor loop. Has this anything to do with the [sortableIndex]="i" parameter? Does this need to be dynamically updated?

[jlherren]

I can't seem to create a plunk, it won't add ng2-dnd to it... I need the same thing, or at least something similar, so allow me to explain it in more details.

The left column contains several dnd-draggable elements, which are not sortable. The right column contains a list of elements, which I need to be a dnd-sortable-container to make it sortable (I think @maartentibau doesn't need this part). When grabbing one of the elements in the left column and hovering them over the right column, they shall immediately become sortable, so that one can add a new element to the right column and also place it in the desired position with one single drag and drop movement. The dragged element shall not be removed from the left column.

I hope that makes it clearer.

[lexyfeito]

hello @jlherren any luck on this?

[jlherren]

@lexyfeito Sorry no, I kinda gave up on it since it's pretty much unusable on mobile anyway.

[PKenderdine]

If there were some way to know which item you dropped onto in the right column, then the items could be added in the correct position. I too have this problem. Can only add at the top or bottom of the list not anywhere in between.