The two Drop components on the left accept numbers, the ones on the right accept strings. The Drag components that contain '1' and '2' are of type 'number', the ones containing 'a' and 'b' are of type 'string'. There are two types in use : 'string' and 'number'. The following demo illustrates the use of types. It is ignored during the drag, no special CSS classes are applied, no special cursors / drag images are displayed and no special events are triggered. The type(s) a Drop component accepts can be defined by mean of the accepts-type prop (can be a string, an array of strings or a function that takes the type as parameter and returns a boolean).Īs far as Easy-DnD is concerned, if a Drop component doesn't accept the type of the current drag operation, it behaves like any other part of the page that is not sensitive to drag and drop. The type of a drag operation is defined by the Drag component that initiates it using the type prop.Ī Drop component is said to participate in a drag operation if it accepts its type (the default is to accept any type). The type is a data structure (can be a simple string) that defines the kind of data being transfered. The following demo illustrates modes in action :Ī drag operation may have a type. If a drag operation originates from a Drag components that doesn't declare a listener for the cut event, then dropping is forbidden on a Drop component that declares the cut mode. This gives the opportunity to the surroundings of the Drag component to react to the drop that just happened, for example by removing the data that has been dropped in case of the cut event. When a drag operation completes on a Drop component that declares the cut (respectively copy) mode, a cut (respectively copy) event is emitted on the Drag component from which the drag operation originated.

cut : if the source of the drag is to be removed when the drag operation completes.ĭrop components must declare what mode must be triggered when data is dropped into them using the mode property.

copy (the default) : if the source of the drag is unaffected by the drag operation,.ModesĪ drag and drop can occur in several possible modes, depending on its effect on the origin of the drag : Import : when a drag operation terminates in a Drop components, its drop event is triggered and the event carries the data to be imported. reorder : triggers when data needs to be reordered (properties : from, to and apply - apply is a function that applies the required reordering to the given array)Įxport : the data being exported when a drag operation originates from a Drag component is defined by mean of its data property.insert : triggered when data is to be inserted into the list (properties : type, data and index).drop : triggered when a drop operation completes on a Drop componentĭropList components emit the following events (in addition to the ones emitted by Drop components) :.dragover : triggered when the mouse moves over a Drop component.dragleave : triggered when the mouse leaves a Drop component.dragenter : triggered when the mouse enters a Drop component.cut / copy : triggered when a drag operation completes successfuly on a Drop component that requires the data to be removed / copiedĭrop components emit the following events :.dragend : triggered when a drag operation terminates (whether successfuly or not).dragstart : triggered when a drag operation starts.source : the Drag component where the drag originatedĭrag components emit the following events :.previousTop : for dragenter and dragleave, the previous value of top if any.top : the foremost Drop component currently under the mouse cursor if any.position : the current position of the mouse cursor.type : the type of the data being transfered.EventsĪll events carry the current state of the drag operation by means of the following properties : The DropList component is a special kind of drop component that displays a list of items that supports dragging into and reordering. The DropMask component is meant to create an island insensitive to drag and drop on top of a Drop component. Drop components can be nested forming hierarchies of arbitrary depth. The Drop component is meant to define an area into which data can be imported. The Drag component is meant to define an area from which data can be exported. There are four components : Drag, Drop, DropMask and DropList. The following demo features drag and drop between a table and a list, custom drag images and a custom style for drop areas when the drop is allowed.

The following demo features list reordering, drag and drop between two lists, custom drag images and custom feedback when inserting new items. For more barebones examples, see the manual. These demos are meant to be pretty and reflect real life examples.

Click and drag on elements in order