如何在ember中使用鼠标拖动选择元素?

时间:2015-05-08 14:36:47

标签: ember.js

SCREEN SHOT我有这样的模板,

<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

1 个答案:

答案 0 :(得分:0)

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.