Drag and drop for Angular 2: works with mouse and touches

Support for Angular 5.


import {DragDropModule} from "alx-dragdrop";

Usage

A clone of the dragged element will be inserted in the DOM, as a direct child of body. It will contains tha CSS class "alx-cloneNode".
You can use that information to specify CSS rule in order, for instance, to apply opacity to the clone.

	body > .alx-cloneNode {

		opacity: 0.7;

	}

Don't forget to use ONCE, at the beginning, the alx-dragdrop directive.
Then, to make a component (or any HTML tag) draggable, use alx-draggable directive. Its value is what will be transmitted by the drag.

	<section [alx-draggable]="{someAttribute: 'hello', someOther: 34}"> ... </section>

In order to define a drop zone, one could do:

	<section alx-dropzone (alx-ondrop)="DoSomethingWhenDrop($event)"> ... </section>

You can refine the dropzone to precise what kind of drag you want to accept.
It is also possible to define some CSS classes to provide some feedback during the interaction.

	<section alx-dropzone 

		[alx-accept-function]="hasAttributeSome" 

		alx-drag-css = "dropCandidate" 

		alx-drag-over-css = "canDrop" 

		(alx-ondrop)="DoSomethingWhenDrop($event)" > 

		... 

	</section> 

	_________________________________________________________________ 

	class MyComponent { 

		hasAttributeSome( draggedData: any ) : boolean { 

			return typeof draggedData.someAttribute !== "undefined" 

		}

	}

API

Start by importing DragDropModule module, which defines 3 directives :

1. alx-dragdrop

   
   

   Attribute directive that has to be present once at the beggining, before any use of the other drag and drop directives.

   
   



2. alx-draggable

   
   

   Attribute directive that indicate that the tag in wich it is contained is draggable. The value associated with alx-draggable is the information that will be be transmited by the drag.

   
   
   Exemple :
   alx-draggable="hello"
   will transmit the string hello.
   
   
   
   Exemple :
   [alx-draggable]="exp"
   will transmit the value of the expression exp evaluated in the context.
   
   
   
   
   In addition, you can optionnally specify the following attribute related to the drag :
   

   
   

   • alx-start-delay

     
     

     This attribute indicates, in milliseconds, the delay during which the pointer has to remain fixed before the drag can be started.
     This delay is intended to enable scrolling with touch or interacting with bouton (click), etc.
     By default, this delay is set to 100ms.
     

     
     alx-start-delay = "100"
     
   
   

   • alx-start-distance

     
     

     This attribute indicates, in pixels, the distance that the pointer should not reach during start-delay.
     This distance is especially intended to enable scrolling with touch.
     By default, this distance is set to 20 pixels.
     

     
     alx-start-distance = "20"
     
   
   

   • alx-drag-start

     
     

     This attribute represent an event emitter.
     The event will be triggered every time the element start to be dragged.
     The value transmitted in $event is the dragged data.
     

     
     (alx-drag-start) = "DoSomethingWhenDragStartWith($event)"
     
   
   

   • alx-drag-end

     
     

     This attribute represent an event emitter.
     The event will be triggered every time the element stop being dragged.
     The value transmitted in $event is the dragged data.
     

     
     (alx-drag-end) = "DoSomethingWhenDragEndWith($event)"
     
   
   

   
   
   
   



3. alx-dropzone

   
   

   Indicate that the tag in which it is contained is a drop zone. At least, you also have to add a alx-ondrop attribute to specify what to do in case of actual drop, exemple:

   
   (alx-ondrop)="append($event)"
   where $event will contains a reference to the value associated with the actual drag.
   

   Possible attributes are listed below:

   
   
   
   

   • alx-ondrop (mandatory)

     
     

     An event emitter that will be triggered when the drop occur.
     $event references the dragged data.
     

     
     (alx-ondrop) = "DoSomethingWithDraggedData($event)"
     
   
   

   • alx-accept-function (optionnal)

     
     

     It has to be associated to a function typed (data: any) => boolean.
     The function will be called with the parameter data referencing the dragged data.
     This function will return true if obj can be dropped on the drop-zone.
     The default fucntion always return true.
     

     
     [alx-accept-function]="isAcceptable"
     
   
   

   • alx-drag-css (optionnal)

     
     

     A CSS class to be added the the tag containing the alx-dropzone attribut when the drag start and if the drop zone accept the value associated to the drag
     

     
     alx-drag-css = "dropCandidate"
     
   
   

   • alx-drag-over-css (optionnal)

     
     

     A CSS class to be added the the tag containing the alx-dropzone attribut when the dragging pointer is over the dropzone and the dropzone accept the drop.
     

     
     alx-drag-over-css = "canDrop"
     
   
   

   • alx-drag-over-css-for-draggable (optionnal)

     
     

     A CSS class to be added the the drag clone (selectable via "body > .alx-cloneNode")
     

     
     

     alx-drag-over-css-for-draggable = "canBeDropDropped"

     
     

     
     body > .alx-cloneNode.canBeDropDropped {
     
     	transform: scale(0.9, 0.9);
     
     }