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

DevExtreme Team Blog
09 December 2019

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.

Draggable

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

Drag&Drop to Scheduler

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.

Kanban Demo

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.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
4 comment(s)
Luis Madaleno
Luis Madaleno
Awesome!!!
9 December 2019
MatthewHughes_
MatthewHughes_
Very cool!
9 December 2019
Sadig Habibullayev 2
Sadig Habibullayev 2
 You need to update your server's date. :)
6 January 2020
CRM-418b1373-a473-43b0-bdba-c439559a2991
Customer150385

Hello Guys,

I am trying to find solution pertaining to drag and drop between two TreeList but unfortunately couldn't find any example for it..Please help

9 June 2020

Please login or register to post comments.