如何使用鼠標在燼中拖動來選擇元素？

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.