DevExtreme - New Drag And Drop Utilities (v19.2)

The recent blog post DevExtreme DataGrid and TreeList - Reordering Records/Nodes and More described the new drag & drop features we integrated in the Data Grid and Tree List widgets. This functionality is based on the new Draggable and Sortable components, which you can also use to implement drag & drop for your own application.

Draggable

The Draggable component allows you to handle drag & drop operations that move items within a container or between container components. Draggable supports automatic scroll by default. Several options control the behavior, please see this documentation page for details.

Here’s a simple Angular code example:

<dx-draggable
  class="item"
  ...
  (onDragStart)="onDragStart($event)"
  (onDragMove)="onDragMove($event)"
  (onDragEnd)="onDragEnd($event)"
>
  ...
</dx-draggable>

As you can see, you’re expected to implement handlers for the events onDragStart, onDragMove and onDragEnd to control the process. In these handlers you have access to the source and target elements of a drag operation as well as attached data.

We have prepared a demo (click this link for jQuery or this for Angular) that illustrates the Draggable component.

The Scheduler Custom Drag-and-Drop demo shows how to implement cross-container drag & drop with the Scheduler widget.

Sortable

The Sortable component derives from Draggable and offers additional functionality for scenarios where users can reorder items inside containers. Please click here for documentation of the Sortable API.

This is a short Angular example:

<dx-sortable class="list" ... (onReorder)="onReorder($event)">
  <div class="item" *ngFor="let item of items">
    ...
  </div>
</dx-sortable>

To change the order of items in your data source, you need to implement a handler for the onReorder event.

To enable cross-component drag & drop, set the group option of several widgets to the same value and implement handlers for the events onAdd and onRemove to process elements dragged across component boundaries.

The option moveItemOnDrop specifies whether the Sortable component should modify the DOM after a drop operation. By default this option is disabled for Angular, Vue and React, since these frameworks apply DOM updates automatically when the data model changes. If you use jQuery or ASP.NET, you may want to set moveItemOnDrop to true, or alternatively implement your own DOM modifications in your onReorder handler.

Please click here to see the Kanban demo as an illustration of the Sortable functionality.

Sortable With The Tree View

At this time, the Tree View widget doesn’t use the new drag & drop components by default. We plan to supply this integration out of the box soon, but for now we have implemented it as a demo. Please click these links for jQuery, Angular and React.

Free DevExpress Products - Get Your Copy Today