Я создал компонент, который является перетаскиваемым элементом.
@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');
}
}
Когда я использую его как отдельный элемент, он запускает событие начала перетаскивания и МОЖЕТ БЫТЬ перетащен в зону перетаскивания.
Когда я создаю его с помощью ngFor списка примитивов (чисел), все элементы запускают событие начала перетаскивания и МОЖЕТ БЫТЬ перетаскиваемым в зону перетаскивания.
Но когда я создаю его с помощью ngFor of objects list, все элементы запускают событие начала перетаскивания, но НЕ МОЖЕТ БЫТЬ перетаскиваемым в зону перетаскивания (они не перетаскиваются).
Вот пример:
@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];
}
Как сделать привязки объектов перетаскиваемыми?
*ngFor
вне<draggable-component>
и создать несколько перетаскиваемых компонентов, каждый со своим собственным объектом, выполняющим что-то вроде этого<div *ngFor="#example of examples"><draggable-component [example] = example></draggable-component.</div>
Затем используйтеinput: [example]
внутри вашегоdraggable-component
директива. - person Morgan G   schedule 09.02.2016#example
, во втором*ngFor
. - person Günter Zöchbauer   schedule 09.02.2016examples
, например, проверяет, является ли наведение указателя допустимой целью перетаскивания или что-то подобное? - person Günter Zöchbauer   schedule 09.02.2016