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 for select an clicked element like,

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

Selection View:

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 that div's in click event. I need to select them when I do use mouse drag.

How do I do that using mouse drag selection? Kindly help me out of that.

DEMO: JSBIN