How to select an element using mouse drag in ember?

I have my template like this,

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

      

        
        
        
      

    

In my js I am using a view to select an element with a click, for example

Model:

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

      

        
        
        
      

    

Choice:

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

      

        
        
        
      

    

Here I am selecting the div on the click event. I need to select them when I use drag and drop.

How do I do this using the mouse drag selection? Please help me with this.

DEMO: JSBIN