Skip to content

Latest commit

 

History

History
77 lines (58 loc) · 3.09 KB

DnD.md

File metadata and controls

77 lines (58 loc) · 3.09 KB
Raw

DnD

The DnD extension can be used to add row drag'n'drop functionality.

Note: Be sure to include dojo/resources/dnd.css or equivalent custom styles when using this extension.

require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/extensions/DnD',
    'dojo/dnd/Source'
], function (declare, OnDemandGrid, DnD, DnDSource) {
    var grid = new (declare([ OnDemandGrid, DnD ]))({
        collection: myStore,
        columns: {
            name: 'Name'
            // ...
        }
    }, 'grid');

    // Set up another target
    var target = new DnDSource('target', {
        accept: [ 'dgrid-row' ],
        isSource: false
        // Optionally, override onDrop(source, nodes) with custom behavior
    });
});

Requirements

The DnD extension assumes usage of a store-backed component, most commonly an OnDemandGrid instance. The store should be order-aware, supporting the options.beforeId parameter on add() and put() calls to properly respond to DnD operations. (dstore/Memory and dstore/Rest both support this feature.)

Additionally, if the store supports a copy method, it will be called for DnD copy operations within the same list/grid (since a put would normally relocate the item).

Note that the DnD extension inherits the Selection mixin, which allows it to behave more resiliently when dragging items.

API

The DnD extension supports the following additional instance properties.

Property Summary

Property Description
dndSourceType String specifying the type of DnD items to host and accept. Defaults to dgrid-row.
dndParams Object to be passed as the second argument to the DnD Source constructor. Note that the accept DnD parameter is set to match dndSourceType by default, but this may be overridden.
dndConstructor Constructor from which to instantiate the DnD Source for the grid. This defaults to the GridSource constructor defined and exposed by the DnD module itself. It is recommended to only override this value with a constructor which extends GridSource.

Touch Support

The dojo/dnd package supports interaction via touch events. However, since touch events are also used to control scrolling of dgrid components on touch devices, a conflict ensues and touch scrolling wins by default. The typical way to resolve this is to set up DnD handles somewhere in the grid, and instruct the DnD source to only drag by handles by passing withHandles: true in dndParams.

An example of this solution can be found in test/extensions/DnD_touch.html.

Styling DnD Avatars

Styling can be accomplished the same as for any element that uses dojo/dnd. See the CSS classes section of the dojo/dnd Reference Guide page for details.

The following are generally the primary classes of interest:

  • dojoDndAvatar: the top-level node of the avatar; useful for setting dimensions
  • dojoDndAvatarItem: the content node of the avatar; useful for setting font properties