Home Ask Login Register

Developers Planet

Your answer is one click away!

ne4istb February 2016

Components are not draggable in Angular2 for Dart when bind objects using ngFor

I've created a component which is a draggable element.

@Component(
    selector: 'draggable-component',
    styles: const ['.element-to-drag {background-color: yellow; border: 1px solid blue; height: 50px; width: 50px;}'],
    template: '''
      <div class="element-to-drag"
           draggable="true"
           (dragstart)="onDragStart(\$event)"
           (dragend)="onDragEnd(\$event)">
      </div>''')
class DraggableComponent {
  void onDragStart(MouseEvent e) {
    print('onDragStart');
  }

  void onDragEnd(MouseEvent e) {
    print('onDragEnd');
  }
}
  • When I use it as a single element it fires drag start event and COULD BE dragged to the drop zone.

  • When I create it using ngFor of primitives list (numbers) all elements fire drag start event and COULD BE dragged to the drop zone.

  • But when I create it using ngFor of objects list all elements fire drag start event but COULD NOT BE dragged to the drop zone (they are not dragged).

Here is an example:

@Component(
    selector: 'my-app',
    directives: const [DraggableComponent, NgFor],
    styles: const ['.container {border: 1px solid red;; height: 100px; width: 100px;}'],
    template: '''
  <div>
    <div class="container"></div>
    <h3>Single</h3>
    <draggable-component></draggable-component>
    <h3>Primitives</h3>
    <draggable-component *ngFor="#example of examplesPrimitives"></draggable-component>
    <h3>Objects</h3>
    <draggable-component *ngFor="#example of examples"></draggable-component>
  </div>
  ''')
class AppComponent {
  get examples => [
    {"name": 1},
    {"name": 2},
    {"name": 3},
    {"name": 4} ];

  get examplesPrimitives => [ 1,2,3,4,5];
}

How can I make bindings of objects draggable?

Answers


ne4istb February 2016

It was Angular2 wit Dart bug. Angular2 with TypeScript works fine in the same case.

An issue was created in Angular repository: https://github.com/angular/angular/issues/6975

Post Status

Asked in February 2016
Viewed 2,041 times
Voted 9
Answered 1 times

Search




Leave an answer


Quote of the day: live life