Adds demos for horizontal lists and useSwap=false

README.md

@@ -158,7 +158,7 @@ Ember.Controller.extend({
 ```
 You can check out an example of this is action [here](http://mharris717.github.io/ember-drag-drop/)
 
-## Sorting of objects (beta)
+## Sorting of objects
 
 We now have a basic sorting capabilities in this library. If you wrap the `{{#sortable-objects}}` component around your `{{#draggable-object}}` components you can get an array of sorted elements returned.
 
@@ -170,7 +170,7 @@ This only applies if you use the sort capabilities, regular dragging is not vers
 An Example:
 
 ```handlebars
-{{#sortable-objects sortableObjectList=sortableObjectList sortEndAction='sortEndAction' enableSort=true}}
+{{#sortable-objects sortableObjectList=sortableObjectList sortEndAction='sortEndAction' enableSort=true useSwap=true}}
   {{#each sortableObjectList as |item|}}
     {{#draggable-object content=item isSortable=true}}
       {{item.name}}
@@ -180,7 +180,7 @@ An Example:
 ```
 
 On drop of an item in the list, the sortableObjectList is re-ordered and the sortEndAction is fired unless the optional parameter 'enableSort' is false.  You can check out an example of this is action [here](http://mharris717.github.io/ember-drag-drop/)
-
+useSwap defaults to true and is optional. If you set it to false, then the sort algorithm will cascade the swap of items, pushing the values down the list. [See Demo](http://mharris717.github.io/ember-drag-drop/horizontal)
 **Note: It's important that you add the isSortable=true to each draggable-object or else that item will be draggable, but will not change the order of any item.**
 
 ### TODO

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-drag-drop",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Addon for Ember CLI to do drag and drop",
   "directories": {
     "doc": "doc",

tests/dummy/app/controllers/horizontal.js

@@ -0,0 +1,22 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  useSwap: true,
+  sortFinishText: null,
+  sortableObjectList: Ember.A(
+    [{id: 1, title:'Number 1'},
+      {id: 2, title:'Number 2'},
+      {id: 3, title:'Number 3'},
+      {id: 4, title:'Number 4'},
+      {id: 5, title:'Number 5'},
+      {id: 6, title:'Number 6'},
+      {id: 7, title:'Number 7'},
+      {id: 8, title:'Number 8'}]
+  ),
+
+  actions: {
+    sortEndAction: function() {
+      console.log('Sort Ended', this.get('sortableObjectList'));
+    }
+  }
+});

tests/dummy/app/router.js

@@ -11,6 +11,7 @@ Router.map(function() {
   this.route("sort");
   this.route("sortdata");
   this.route("handle");
+  this.route("horizontal");
 });
 
 export default Router;

tests/dummy/app/routes/horizontal.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+
+});

tests/dummy/app/styles/app.css

@@ -85,7 +85,7 @@ html, body {
   color: white;
 }
 .sortObject {
-  margin: 1em 0;
+  margin: 1em;
   width: 300px;
   height: 100px;
   background-color: blueviolet;
@@ -102,7 +102,7 @@ html, body {
 .u-marginLeft {
   margin-left: 10%;
 }
-.u-halfBlock {
+.u-fullBlock {
   display: inline-block;
   width: 100%;
 }

tests/dummy/app/templates/application.hbs

@@ -7,6 +7,7 @@
   <li>{{#link-to 'sort'}}A Simple Sorting Example with POJO{{/link-to}}</li>
   <li>{{#link-to 'sortdata'}}A Simple Sorting  with Ember Data{{/link-to}}</li>
   <li>{{#link-to 'handle'}}Drag with a handle{{/link-to}}</li>
+  <li>{{#link-to 'horizontal'}}Horizontal Lists{{/link-to}}</li>
 </ul>
 <br><br>
 {{outlet}}

tests/dummy/app/templates/horizontal.hbs

@@ -0,0 +1,36 @@
+<h3>A Horizontal sorting example</h3>
+<p>When using a horizontal list, you probably want to change the sorting algorithm.<br>
+This demo demonstrates the different between the flag useSwap=true (default) and useSwap=false
+</p>
+
+<div class="u-fullBlock u-pullLeft">
+  <p>In this template the sortable-objects passes in 'useSwap'</p>
+  <p>{{input type="checkbox" checked=useSwap}} useSwap={{#if useSwap}}true{{else}} false{{/if}}</p>
+  <p>Typically for a horizontal list, sending in useSwap=false is the right choice.  <br>By default (useSwap=true) the box being dragged will be swapped with the item it's over. <br>If useSwap=false the item will be swapped with the one it's over and the items in the list under it will be pushed down the line.</p>
+  <div class="u-pullLeft">
+    {{#sortable-objects sortableObjectList=sortableObjectList sortEndAction='sortEndAction' useSwap=useSwap}}
+      {{#each sortableObjectList as |item|}}
+        {{#draggable-object content=item  overrideClass='sortObject u-pullLeft' isSortable=true}}
+          {{item.title}}
+        {{/draggable-object}}
+      {{/each}}
+    {{/sortable-objects}}
+  </div>
+  <div class="u-fullBlock">
+    <h3>Order of objects is:</h3>
+    <ul>
+      {{#each sortableObjectList as |item|}}
+        <li>id:{{item.id}}, title:{{item.title}}</li>
+      {{/each}}
+    </ul>
+  </div>
+</div>
+<br><br>
+<div class="u-fullBlock">
+  Template is here: <a href="https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/templates/horizontal.hbs" target="_blank">https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/templates/horizontal.hbs</a>
+  <br>Controller is here: <a href="https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/controllers/horizontal.js" target="_blank">https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/controllers/horizontal.js</a>
+  <br>Route is here: <a href="https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/routes/horizontal.js" target="_blank">https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/routes/horizontal.js</a>
+</div>
+
+
+