2

I would like to know what the recommended way to implement JQuery sortable and drag/and drop is. I think I could use the update event to update the model:

var options = {
placeholder: "ui-state-highlight",
update: function (event, ui) {
         // update the model
    } ,
$("#sortable").sortable(options);

But that would retrigger an update of the dom. And what about the special script tags Ember inserts ?

What I would like to implemented can be seen here:

http://minitrello.meteor.com/

Regards Roger

MilkyWayJoe
  • 9,082
  • 2
  • 38
  • 53
rogergl
  • 3,501
  • 2
  • 30
  • 49
  • Perhaps lookiing at: http://stackoverflow.com/questions/10762484/ember-js-html5-drag-and-drop-shopping-cart-demo and http://stackoverflow.com/questions/10739322/dragdrop-with-ember-js will help you – sly7_7 Jul 29 '12 at 19:57
  • That will work, but would require reinventing functions that JQuery UI has already implemented. Maybe using no databinding and updating the model after JQuery UI has finished is the better solution in this case ? – rogergl Aug 01 '12 at 18:41
  • By answering to a question, I realize that JQuery.sortable() was not as I imagined. See http://stackoverflow.com/questions/11748164/ember-js-and-jquery-sortable-how-to-work-around-the-metamorph-scripts, perhaps it's what you are looking for – sly7_7 Aug 01 '12 at 20:50

1 Answers1

4

I made this, it will bind the order of an ArrayController to the View :

Ember.SortableView = Em.CollectionView.extend({
  tagName: "ul",
  moveItem: function(fromIndex, toIndex){
    var items = this.get('content');
    var item = items.objectAt(fromIndex);
    items.removeAt(fromIndex);
    items.insertAt(toIndex, item);
  },
  didInsertElement: function() {
    var view = this;
    view.$().sortable({
      cursor: "move",
      start: function(event, ui) {
        ui.item.previousIndex = ui.item.index();                      
      },
      stop: function(event, ui) {
        view.moveItem(ui.item.previousIndex, ui.item.index());
      }
    });
  },
  willDestroyElement: function() {
    this.$().sortable('destroy');
  }
});

Use it like that :

{{#collection "Ember.SortableView" contentBinding="items"}}
  template of an item
{{/collection}}
Ugo Méda
  • 1,205
  • 8
  • 23
  • 1
    This was working great for me until I updated to Ember 1.8.1. Now I'm getting `Uncaught TypeError: Cannot read property 'nextSibling' of null` in `Morph.insert`. – Tindron Dec 02 '14 at 19:31