Javascript 如何使用ember实现多次拖放

我见过不同的单个对象拖放示例，如本问题中所述

但是，由于拖动事件在视图对象上，我不知道如何实现多视图选择拖放（例如在电子邮件客户端或evernote中）

---

任何jsbin都非常受欢迎。

这是一个使用

ember

和

jqueryui

进行拖放的示例。虽然没有必要将可拖动组件拆分为单独的视图，但拆分它们只是为了演示op提到的多视图选择

因此，将下面的代码与本线程中的示例结合起来

（请看评论）

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>

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}));

---

我用jqueryUI来做这个。将下面的文件添加到您的应用程序中，然后您可以扩展自定义jquery视图

---

如果没有jquery ui，就没有办法让它工作，就只有余烬视图事件吗？@borisrorsvort据我所知，余烬中没有与拖放相关的现成功能，老实说，拥有这样的功能会很奇怪。在这里，我试图演示一个简单的示例，以及使用视图实现您的需求的建议。另外，您当然不能使用jquery ui和中提到的漂亮实现，只需删除jquery ui部分并添加线程中提到的mixin即可。谢谢，但在相关问题中，无法一次拖动多个。所以不，我不能不使用jquery uiJaime就使用另一个例子，这似乎是一个有趣的选择。你能举一个例子说明如何用它在Ember中实现拖放吗？