如何使用鼠标在烬中拖动来选择元素？

Question

我有我的模板就是这样，

<div> 
    {{#each model as |item|}} 
     {{#view "selection" model=item}} 
      <div class="child_div">{{item.name}}</div> 
     {{/view}} 
    {{/each}} 
</div> 

在我的JS，我使用选择点击的元素像视图，

型号：

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
     return [{'is_active':false, 'name':'One'}, {'is_active':false, 'name':'Two'}, {'is_active':false, 'name':'Three'}, {'is_active':false, 'name':'Four'},{'is_active':false, 'name':'Five'}]; 
    } 
}); 

选择视图：

App.SelectionView = Ember.View.extend({ 
    classNameBindings: ["isActive"], 
    isActive: Ember.computed.alias('model.is_active'), // No I18N 
    click: function(){ 
     var self = this; self.get("controller").setEach("is_active", false); // No I18N 
     self.toggleProperty("isActive"); // No I18N 
    } 
}); 

在这里，我选择该div在点击事件中。当我使用鼠标拖动时，我需要选择它们。

我该如何做到这一点使用鼠标拖动选择？请帮我解决这个问题。

DEMO：JSBIN

Answer 1

的draggable属性添加到您的视图，并使用dragStart事件。

attributeBindings : [ 'draggable' ], 
draggable   : 'true', 
dragStart: function(event) { 
    var self = this; 
    self.get("controller").setEach("is_active", false); // No I18N 
    self.toggleProperty("isActive"); 
} 

Here is working demo.

Here is a good article from Lauren Tan on drag n drop in Ember.