Isn't dnd-droppable and dnd-sortable-container a false dichotomy?

[Kumfert]

I have a simple use case that isn't covered by any of the examples on the site, or the Plunker.

Use Case: Build a Slide-Show from a collection of photo albums.

• (OK) The albums (sources) are immutable lists of images. Dragging an image off an album doesn't change the album.
• (OK) The slide show (target) is a dnd-sortable-container
• (BUT) Each element in the slide-show is a different type than the elements in album. Slide-show elements have an image and a duration. So I need something like onDropSuccess() in the sortable container to do the conversion before inserting into the data array. (dnd-droppable does this, dnd-sortable does not).
• (ALSO) Users don't always append to the end of the slide-show. They want to insert in the middle or beginning, wherever the mouse is. (dnd-sortable-container does this, dnd-droppable does not)
• (BONUS) I'd also like to delete items from the slide-show by simply dragging them off the list. (granted, I could have another dnd-droppable to act like a recycle bucket, but it clutters the design).

Current Behavior There appears to be some dichotomy between a dnd-sortable-container and dnd-droppable. (naming question: shouldn't it be a dnd-droppable-container?) They both inherit from the same AbstractComponent, but cleave off different, mutually exclusive, subsets of behavior when I want the union of the two.

Questions

• Why not just have a universal dnd-container object that does everything and let me configure it how I see best for my customers?

[akserg]

Hi Garry,

I agree with you - it's time to revisit the terminology and improve DnD from different aspects.

[Kumfert]

I'm on a deadline and was digging into the code to see if I could contribute.

One thing I'm not clear on is in sortable.component.ts (lines 108-115). The constructor injects a SortableContainer, but how is the container not getting the same ElementRef as the sortable? Or does it, and you're relying on it getting updated elsewhere?

[crivadavi]

Hi, I have the same problem of Gary, I'd like to know if you are going to insert onDropSuccess event in the dnd-sortable container or if I have to find a workaround (although until now I haven't find any solution)

[MarkDeVerno]

+1

[Kumfert]

I ended up writing something from scratch that fit my needs. I could post raw code on GitHub, I suppose, but it doesn't have unit tests, package manifests, or any of those things needed to be a respectable NPM package. Interested?

[crivadavi]

Yeah, I would really appreciate it if you could post your code, I don't mind if it's just raw code, thanks

[mikedobrin]

I'm having the same problem.

I'm constructing a table from the set of predifined column types. It should be possible to rearrange columns in table as well as drop new columns from the predifined column types list. I try to solve this problem by having both table drop container and list that holds the column types as sortable containers and items within them as sortable objects. However - this approach has some drawbacks the most significant one is that you need to reset the list of column types each time you dragged something out. Also user can drop columns back from the table onto the list which is not intended. Would be nice to have the list as only draggable items and table area as sortable container yet being able to use both together.

[jfelenP]

@Kumfert Did you post that code anywhere?

[Kumfert]

@jfelenP Since Angular team is going to add drag-n-drop to the CDK (8963), I'm not sure there's much value in publishing yet another drag-n-drop library. I'll post what I have here for reference dnd.tar.gz, but it was only for my immediate needs, not general purpose use.

The sample code to drive it looks like this:

                    <div layout="row">
                        <div id="drop1" dnd-container [sortableData]="array1" [copyNotMove]="true" [dropEnabled]="false"> 
                        <div *ngFor="let item of array1; let i = index" dnd-item [sortableIndex]="i" [dragData]="item">
                            <p>{{item}}</p>
                        </div>
                        </div>

                        <div id="drop1a" dnd-container [sortableData]="array1" [copyNotMove]="true" [dropEnabled]="false"> 
                        <p dnd-item [dragData]="'hello'">hello</p>
                        </div>


                        <div id="drop1b" dnd-container [sortableData]="array1" [copyNotMove]="true" [dropEnabled]="false"> 
                        <p dnd-item [dragData]="'there'">there</p>
                        </div>

                        <div id="drop2" dnd-container [sortableData]="array2" [deleteOnDragOff]="true" [dataConvert]="convert">
                        <div *ngFor="let item of array2; let i = index" dnd-item [sortableIndex]="i" [dragData]="item">
                            <p>{{item}}</p>
                        </div>
                        </div>
                    </div>