How would you achieve multiple drag and drop with ember

This is an example of using drag and drop emberwith jquery-ui. Although it is not necessary to separate draggable components into separate views, they have been split to demonstrate the multiple view selection indicated by the operation.

So combine the following code with the example found in this thread

How to drag multiple items at once using JavaScript or jQuery?

(look at the comments http://jsfiddle.net/zVZFq/358/ )

http://emberjs.jsbin.com/sasasuka/1/edit

Hbs

<script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each post in model}}
    {{#with post}}
    <div class="placeholder">
      {{render "post" post}}
      </div>
      {{/with}}
    {{/each}}
    </ul>
  </script>
  <script type="text/x-handlebars" data-template-name="post">
  <div class="post" {{bind-attr id="id"}}>
    {{name}}
    </div>
  </script>

Js

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {

    return allPosts;
  }
});

App.IndexView = Ember.View.extend({
  classNames:["post-container"]
});

App.PostController = Ember.ObjectController.extend({
});

App.PostView = Ember.View.extend({
  templateName:"post",
  classNameBindings: ['selected'],
  selected:Ember.computed.alias("context.selected"),
   didInsertElement:function(){

    this.$(".post").draggable({ revert: "invalid", snap: ".post-container",snapMode:"inner" });

    var self = this;

        /*jquery ui create the draggable component*/
        this.$(".post").draggable({ revert: "invalid", snap: ".post-container",snapMode:"inner" });

        /*create the droppable component*/
        this.$().droppable({
          drop:function(event,ui){

            var draggedPostId = parseInt(ui.draggable.attr("id"),10);
            var draggedPost = self.get("parentView").get("controller").findBy("id",draggedPostId);
            var draggedOrder = draggedPost.get("order");

            var droppedPost = self.get("controller").get("model");
            var droppedOrder = droppedPost.get("order");

            draggedPost.set("order",droppedOrder);
            droppedPost.set("order",draggedOrder);

            allPosts = allPosts.sortBy("order");
            self.get("parentView").get("controller").set("model",allPosts);
          }
        });
   },

    click:function(){
      this.toggleProperty("controller.selected");
    }

});


App.Post = Ember.Object.extend({
  id:null,
  name:null,
  order:null
});

/*this would come from a server or web storage*/
var allPosts = [];
     allPosts.pushObject(App.Post.create({id:1,name:"post1",order:1}));
     allPosts.pushObject(App.Post.create({id:2,name:"post2",order:2}));
allPosts.pushObject(App.Post.create({id:3,name:"post3",order:3}));
allPosts.pushObject(App.Post.create({id:4,name:"post4",order:4}));
allPosts.pushObject(App.Post.create({id:5,name:"post5",order:5}));