(Great lib!)

Is there a way to augment the transform property on the dragging element?

I was hoping to achieve this effect by using transform: scale on the dragging element, but the transforms added by this lib override it. As far as I know there's no way to stack transforms in CSS.

If not, perhaps I could think through an API and PR it. Or maybe the library could check if there's a transform property, and just replace the translateY piece of it. Thoughts?

When a sortable-group contains <tr> elements as its sortable-items, dragging an item to sort results in the rest of the table rows being pushed much further down the height of the table than is expected. The magnitude of the effect seems to derive from the position of the table on the page -- in a real page, where the table was further down, the rows were pushed so far out that they were not visible.

Hi, I'm having some issues with getting .handle to work given the following layout (emblem):

.row.col-md-9
  = sortable-group tagName="div" onChange='reorderItems' as |group|
    = each sortedModel as |item|
      = sortable-item tagName="div" model=item group=group handle='.handle'
        .col-md-12: .block.block-bordered.block-link-hover3
          table.block-table: tbody: tr
            td.bg-gray-lighter.border-r style='width: 100px;'
              img.pull-left src='https://placeholdit.imgix.net/~text?txt=100%C3%97100&w=100&h=100'
            td
              .h5.push-5-t
                span.text-muted.text-uppercase Caption:  
                = item.caption
              .h5.push-5-t
                span.text-muted.text-uppercase First Comment:  
                = item.first_comment
            td.bg-gray-lighter.border-l style='width: 20px;'
              span.handle data-item=item ⇕

What's happening is that I can drag the items, but they don't move out of the way for each other or reorder, e.g. if I have two elements and i drag the bottom one up, the top one doesn't move at all.

I did some experimentation and have found that a lot of the time a <span class="handle"> is not recognised unless it's a top element inside the {{#sortable-item}}. Is there a way around this? 😄

I'm having intermittent problems with actions when I'm using a sortable list. I have a list of items, each rendered with a component. That component has a "delete" action on it, activated by clicking the 'x' next to the item name.

The following code should give an idea what I'm talking about.

{{!-- templates/items.hbs --}}
{{#sortable-group onChange="itemsReordered" as |group|}}
  {{#each model.items as |item|}}
    {{#sortable-item model=item group=group handle=".item-list-item"}}
      {{item-list-item item=item deleteItem="deleteItem"}}
    {{/sortable-item}}
  {{/each}}
{{/sortable-group}}

The item-list-item component has the following template:

{{!-- templates/components/item-list-item.hbs --}}
{{item.name}}<span {{action "deleteItem"}}>x</span>

and the accompanying script file

// components/item-list-item.js
import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ["item-list-item"],
    item: null,

    actions: {
        deleteItem: function () {
            this.sendAction("deleteItem", this.getAttr("item"));
        }
    }
});

Until today, I've found that this has worked flawlessly (or possibly almost flawlessly, and I just assumed that I'd missed the 'x' when it didn't work), as have my two colleagues who have been using the code. As of today, both myself and my colleague are finding that more often than not (> 90% of the time), the deleteItem action doesn't get called. Looking at the DOM inspector, we can see that when this is the case, the .item-list-item div gets the is-dragging class, whilst when deleteItem gets called, it does not. My guess is that there is a race condition between which handler gets called first, and the second handler does not get called.

For now, I can work around this by making the draggable part not include the 'x', but I'd like to avoid doing this if possible.

Right click currently starts drag. I'm constantly hitting it when I try to inspect element in Chrome.

In demo when I drag the last element to the window top fast and leave it (faster than sorting animation) the list is jumping little than going back.

It seems to me that the only reason why model.item is used in the examples, is because this.set('currentModel', anArray); doesn't trigger a property change. But since Ember has a special syntax for dealing with arrays, I'd consider updating the examples to the following, if you feel it's not that confusing:

actions: {
  reorderItems(newOrder) {
    this.set('currentModel.[]', newOrder);
  }
}

I can submit the PR if you're in favor.

I couldn't figure out how to move and sort between lists.

Previously we could count on Ember simply replacing all elements when the collection changes. Glimmer’s element re-use demands a new approach.

Concerns:

• Strip transforms
• Clear cached _y
• Somehow avoid weird transitions

You're doing the right thing™. Don't ask people to tell you otherwise ;)

While it would be technically possible to automatically discover the parent group, we feel establishing this relationship explicitly is clearer. Feedback welcome.

{{#sortable-group tagName="ul"  onChange="modelsOnChange" as |group|}}
  {{#each model.models as |brandModel|}}
    {{#sortable-item tagName="li" model=brandMmodel group=group handle=".handle"}}
      {{brandModel.GuiGeXingHao}}
      {{#md-button class="md-raised md-primary" param=brandModel}}详情
      {{/md-button}}
      {{#md-button class="md-raised md-primary" action="delModel"}}删除
      {{/md-button}}
      <span class="handle">&varr;</span>
    {{/sortable-item}}
  {{/each}}
{{/sortable-group}}

export default Em.Route.extend({
  instanceInit:function(){
    console.log("Route changemodelsorder instanceInit end");
  }.observes().on('init'),
  model: function(params){
    var brandName = params['brandName'];
    return Em.RSVP.hash({
      models:this.haida.getShowModels(brandName).then(function(models){
        console.log(models);
        return models;
      }),
    });
  },
  actions:{
    modelsOnChange:function(itemModels, draggedModel) {
      //console.log(groupModel);
      console.log(itemModels);
      console.log(draggedModel);
      var models = this.get('currentModel.models');
      console.log(models);
      //groupModel.setObjects(itemModels);
    }
  }
});

itemModels, draggedModel got null,
And I can NOT get an new Order.
Please HELP ⏰

Whenever you try an select text it starts the dragging rather than selects the text

Just ran into an issue where my own code didn't call _super on didInsertElement which stopped ember-sortable working, but the opposite could also happen (depending on mixin inclusion order).

didInsertElement etc should call this._super() once they've done their thing so we can pass the baton along.

I have a sortable with form fields. If I don't specify a handle, the component doesn't allow me to focus into any of the form fields.

From @rlivsey:

I wonder if there should be a SortableItemMixin which SortableItemComponent uses, that way you can make a component sortable by mixing in the mixin from the addon without using the compoment.

Thank you for the awesome addon!

It should be possible to prevent draggable items to be moved outside the specified area (typically the sortable-group).

Not sure if they do or not, but would be good to check.

What is the recommended approach for saving order to groupModel in ember data? How can we persist order to groupModel such that the order can be retrieved and displayed in the view as it was arranged?

My current implementation:

deck.hbs:

{{#sortable-group tagName="ul" model=model class="deck-slides-nav-slides" onChange="reorderItems" as |group|}}
            {{#each model.slides as |slide|}}
                {{#sortable-item tagName="li" model=slide group=group handle=".handle" class="deck-slides-nav-slides-slide"}}
                    <span class="handle">&varr;</span>
                    {{#link-to "admin.decks.deck.slides.slide" slide class="deck-slides-nav-slides-slide-link"}}
                        {{#slide-instance slide=slide deck=model onRemove="removeSlide"}}{{/slide-instance}}
                    {{/link-to}}
                {{/sortable-item}}
            {{/each}}
{{/sortable-group}}

routes/deck.js:

export default Ember.Route.extend({
    model(params) {
        return this.store.findRecord("deck", params.deck_id);
    },
    actions: {
        reorderItems(groupModel, itemModels, draggedModel) {
            debugger;
            groupModel.set("slides", itemModels);
            return Ember.RSVP.all([draggedModel.save(), groupModel.save()]);
        }
    }
});

In this case, I am suspecting that order is saved from within the structure of the payload json request sent with save(), but in cases where the server returns items in its own sorted order, what is the recommended approach to persisting order?

The maths for the positioning currently assumes that the items all have the same dimensions. I haven't dug into the positioning code yet but I suspect this is going to be tricky...

Hey guys,

I just implemented ember sortable successfully but when I go about and drag an item ontop of the next item and drop it I get this in my console: Uncaught TypeError: Cannot read property 'css' of undefined

And then it immediately takes me to my homepage of my app..

Is this a bug? Or am I implementing it wrong?

Thanks,

Ethan

In a long-ish list, when re-ordering, I want to zoom out the UI (apply a CSS transform to shrink all the elements).
This will allow the user to easily drag and drop elements a large number of elements away.
I think I could do this if we had a mouseDown event and i could do custom stuff from it.

What do you think? I think it would mean exposing another handle like onChange.

it looks like when i click an element, it also fires the onChange action. i'm guessing this also reinserts the element? i'm yielding a component templet inside the sortable items and they lose their state onChange. So they're also losing their state

It would be nice to have a visible drop-target rather than just open up a space. Depending on what's in your list, the space alone can be unclear at times. I'm thinking that we add an additional class "drop-target" onto the item before the space and style it with something like:

.sortable-item.drop-target:after
{
content: " ";
display: block;
width : 100%;
height : 50px;
border : 2px dashed yellow;
background-color: #FFF8F8;
opacity: 1;
}

In the case where the drop target is before the first item, we can add a different class "drop-target-before" and use :before CSS selector instead.

I've looked through the code and now have a reasonably good idea how most of it works. But some of it is still eluding me...

I can see how the dragged item updates its position. And that it calls update on the group which in turn sets their positions. What I can't see is how the other item's position is calculated? Could you provide a few notes on how that works please?

long lists, which are not all visible, cannot be sorted with ember-sortable. Do you plan to addapt a smart scrolling approach like done in https://github.com/RubaXa/Sortable ?

demo:

http://jsbin.com/kohamakiwi/1/edit?html,js,output

Will help with #13

Hi!
In my use case I have a sortable set nested inside another array of objects. Something like:

model() {
  return {
    groups: [
      { 
        id: 0,
        items: [
          { name: 'Uno' },
          { name: 'Dos' },
          { name: 'Tres' },
          { name: 'Cuatro' },
          { name: 'Cinco' }
        ]
      },{ 
        id: 1,
        items: [
          { name: 'Eins' },
          { name: 'Zwei' },
          { name: 'Drei' },
          { name: 'Vier' },
          { name: 'Fünf' }
        ]
      }
    ]
  };
}

In the current code, I cannot specify which group the reorderItems action handler should target, since only the newOrder array is given.

Could we modify the sortable-group component to accept an additional source variable, so that the reorderItems know which group it is suppose to modify?

I've created a branch here.

In terms of feature support and specific browser versions.

Sorting worked fine on mobile browsers in the past but the latest version appears to have broken the mobile/touch events. It works fine on desktop but no activities at all on mobile.

Each of my sortable items is a component and has actions I need to bubble up to the top-level controller (ie the controller for the template rendering the sortable group)

Is there a way to do this?

Hey there. First of all, what a nice addon! I like the look and feel of the animated objects when sorting...

But i'm currently facing some issues while trying to save the elements position in the server... I need to send only the data from the item that had it's position changed, and i can't replace the model with a new Array, cause i have some dynamic itens that can be added and removed, and i would lost the bind doing this.

So... I would like to know if is there some option to turn off the auto-refresh model, so then i can refresh it only after the servers response. Is that possible?

(sorry, i cant post any code snippet doe to the company's contract)

Other thing that would be nice, is to add a "newPosition" argument in the actions "onDragStop" and "onChange"... Because, in my case, i need to set the new position index in a property "position" and PATCH it to the server... I managed to make it by doing a forEach in the groupModel, look for the item.id and get the index of the match, but would be very helpfull to have some argument with this value...

Thank you very much!

Thank you for an awesome addon!

I would like to use ember-sortable in the context of a grid layout. Along the lines of this: https://greensock.com/?example=sortable-grid-using-draggable.

What are your thoughts on adding support for this sort of layout?