diff --git a/README.md b/README.md index 85daa0d..ecf0952 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 2b6ce6c..d198315 100644 --- a/package.json +++ b/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", diff --git a/tests/dummy/app/controllers/horizontal.js b/tests/dummy/app/controllers/horizontal.js new file mode 100644 index 0000000..08bc2ce --- /dev/null +++ b/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')); + } + } +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 7decb8f..96a177e 100644 --- a/tests/dummy/app/router.js +++ b/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; diff --git a/tests/dummy/app/routes/horizontal.js b/tests/dummy/app/routes/horizontal.js new file mode 100644 index 0000000..cdd5757 --- /dev/null +++ b/tests/dummy/app/routes/horizontal.js @@ -0,0 +1,5 @@ +import Ember from 'ember'; + +export default Ember.Route.extend({ + +}); diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css index be6a189..d7fbf16 100644 --- a/tests/dummy/app/styles/app.css +++ b/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%; } diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 0004656..72eb16b 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -7,6 +7,7 @@
  • {{#link-to 'sort'}}A Simple Sorting Example with POJO{{/link-to}}
  • {{#link-to 'sortdata'}}A Simple Sorting with Ember Data{{/link-to}}
  • {{#link-to 'handle'}}Drag with a handle{{/link-to}}
    • +
  • {{#link-to 'horizontal'}}Horizontal Lists{{/link-to}}


    • {{outlet}} diff --git a/tests/dummy/app/templates/horizontal.hbs b/tests/dummy/app/templates/horizontal.hbs new file mode 100644 index 0000000..f89c824 --- /dev/null +++ b/tests/dummy/app/templates/horizontal.hbs @@ -0,0 +1,36 @@ +

    A Horizontal sorting example

    +

    When using a horizontal list, you probably want to change the sorting algorithm.
    +This demo demonstrates the different between the flag useSwap=true (default) and useSwap=false +

    + +
    +

    In this template the sortable-objects passes in 'useSwap'

    +

    {{input type="checkbox" checked=useSwap}} useSwap={{#if useSwap}}true{{else}} false{{/if}}

    +

    Typically for a horizontal list, sending in useSwap=false is the right choice.
    By default (useSwap=true) the box being dragged will be swapped with the item it's over.
    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.

    +
    + {{#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}} +
    +
    +

    Order of objects is:

    + +
    +
    +

    +
    + Template is here: https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/templates/horizontal.hbs +
    Controller is here: https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/controllers/horizontal.js +
    Route is here: https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/routes/horizontal.js +
    + + +