Interaction primitives enable the user to manipulate and transform data by dragging and moving UI elements in a simple and intuitive way. They may be triggered either by drag and drop operations or programmatically.  There are two types of interaction primitives :

• Data-Binding based interactions
• Reference based interactions

In Data-Binding based interactions an Html node, the final target,  receives information from another Html node, the source. As a result  of the data binding some input fields, and content-nodes(span, divs, etc.) of the final target are filled with strings taken from input fields and content-nodes of the source. The way input fields, and content-nodes of source and target are matched is based on name conventions and declarations contained in Html5 attributes. During the Data-Binding process some strings copied from the source to the target may be transformed according to specifications contained in Html5 attributes. The final target may already exist, or it may be a new item created after the Data-Binding based interaction between the source and an initial target.  Source and an initial target are usually selected with a Drag and Drop operation; more specifically the source is the dragged element, and the initial target is the element where the dragged element is dropped to. 

Reference based interactions may be used only if there is a Client Side ViewModel bound to the UI according to the MVVM pattern. In this case the interaction between a Source Html Element and an Initial Target Html Element causes a "mirror" interaction between a Source Model, and a Target Model that  are associated to the initial Html elements through a custom knockout binding called,  Reference binding. The specific operation involving  Source Model and Target Model may be controlled by the developer in several ways. Among the possibilities, the Source Model substitutes the Target Model, or is inserted after/before/inside it. Another possibility is the creation of a bidirectional communication channel between the Source Model and the Target Model that keeps the two data structures "synchronized".

Two examples are contained in this page . More examples in this two videos: Data Interactions and Dragging, Manipulating the Client Side ViewModel.

A live example showing Data-Binding based interactions may be found here.