Окошки, которые можно двигать на Angular?

Question

[ebanytiu_lis]

Доброго времени суток!
Сел за ангуляр, пытаюсь сделать окошко, которое можно двигать за его заголовок.
Вёрстка окна:

<div class='windows'>
  <div id='title'>Title</div>
  <div id='content'>Content</div>
</div>

Подрубил модуль draggeble отсюда: stackblitz.com/edit/draggable-part-3
Так вотс... Если добавляю атрибут appMovable к основному диву, то окошко двигается полностью, при клике в любую его область. А мне нужно чтобы оно двигалось только при клике по заголовку окна.
Можно ли как-нибудь при клике по #title заставить двигаться всё окно?
P.S. Окон на странице может быть много

Answer 1

[Дмитрий Еремин]

так, а как насчет по событиям onmousedown/onmouseup добавлять/убирать всему окну класс draggable ?
или даже по наводу на title (onmouseover/onmouseout)

https://www.w3schools.com/js/tryit.asp?filename=tr...
https://www.w3schools.com/js/tryit.asp?filename=tr...

Comments

[ebanytiu_lis]

Проблемка в том, что у меня angular. И хочется всё написать через него... Так-же я понять не могу, как получить доступ к родителю того же .#title

[Дмитрий Еремин]

ebanytiu_lis, ну так и делайте через ангуляр

<div [ngClass]="{'windows': true, 'draggable': isDraggable}">
  <div id='title' (onmouseover)="isDraggable=true" (onmouseout)="isDraggable=false">Title</div>
  <div id='content'>Content</div>
</div>

Ну и в коде компонента, при инициализации
isDraggable = false