Drag and Drop Module

Drag and drop lets you group objects by dragging them. It has 2 sections, grouped and ungrouped.

Installation

All public npm packages of Logo Software is at https://www.npmjs.com/org/logo-software. To install Drag-Drop Module:

$ npm set registry https://registry.npmjs.org/
$ npm install @logo-software/drag-drop -s

Just import it to your project of @NgModule import section.

@NgModule({
 imports: [CommonModule, LogoDndModule],
})
export class AppModule {
}

Drag Drop Component

The Drag and Drop component allows you to drag and drop grouped and ungrouped objects and output grouped objects. Add the following code to your code stack and give the initializer parameters.

The drag and drop component is

app.component.html

<logo-dnd
  [effect]="'move'"
  [items]="options"
  [groupedItems]="optionGroups"
  [itemPath]="'Body'"
  [groupedItemPath]="'Options'"
  [groupHeaderPath]="'Body'"
  (droppedItems)="setGroup($event)"></logo-dnd>

app.component.ts

  public options = [
    {
      Body: 'Option 1',
      QuestionId: 414,
      OptionGroupsOrder: null,
      OptionGroupId: null,
      Id: 734,
    },
    {
      Body: 'Option 2',
      QuestionId: 414,
      OptionGroupsOrder: null,
      OptionGroupId: null,
      Id: 735,
    },
    {
      Body: 'Option 3',
      QuestionId: 414,
      OptionGroupsOrder: null,
      OptionGroupId: null,
      Id: 736,
    },
  ];

  public optionGroups = [
    {
      OrderList: null,
      Order: 1,
      Body: 'Group 1',
      QuestionId: 414,
      Options: [
        {
          Body: 'Option 4',
          QuestionId: 414,
          OptionGroupsOrder: null,
          OptionGroupId: null,
          OptionGroup: null,
          Id: 737,
        },
      ],
      PropertyResources: [],
      InsertDate: '2023-03-05T23:16:41.43059',
      IsActive: false,
      Id: 21,
    },
    {
      OrderList: null,
      Order: 2,
      Body: 'Group 2',
      QuestionId: 414,
      Options: [
        {
          Body: 'Option 5',
          QuestionId: 414,
          OptionGroupsOrder: null,
          OptionGroupId: null,
          OptionGroup: null,
          Id: 738,
        },
        {
          Body: 'Option 5',
          QuestionId: 414,
          OptionGroupsOrder: null,
          OptionGroupId: null,
          OptionGroup: null,
          Id: 739,
        },
      ],
      PropertyResources: [],
      InsertDate: '2023-03-05T23:16:41.433432',
      IsActive: false,
      Id: 22,
    },
  ];

For API details, please visit http://elements.logo.com.tr/