drag and drop layout blocks (spec)

dragAndDropLayoutSpec.md

Drag and Drop Layouts

Outline

A document would be simply, an array of objects, visually sortable through a drag and drop interface.

Each object in this array represents a draggable html element rendered on the page. When dragged over another the aforementioned array is resorted. Whenever the array resorts, it will rerender its' contents to the page.

An example of the array of objects that represents a document

documentA = [
  { content: 'Block 1'},
  { content: 'Block 2'},
  { content: 'Block 3'}
  ];

An example of how this would be rendered in html

<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>

###Implementation

1. A block object which is draggable and sends a message to the document(#2) when another block is being dragged before it (close to top or left edge) or after it (close to bottom or right edge).
2. A document object and view, which keeps track of an array of blocks(#1) and renders those blocks to the page whenever the array or a block in the array changes. It also listens to messages from it's children and resorts itself accordingly.
3. A droptarget element which serves as placeholder and visual feedback to tell the user where the dragged element will land.