I am using bootstrap and this library for draggable windows:https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/utils/Draggable.min.js
I can make one window draggable in the page, however, when i toggle multiple windows, only the first window is draggable.
Does anyone have a solution? Here is the code:
<div class="btn-group">
<label class="btn btn-primary" ng-click="toggleNotebook()">Notebook</label>
<label class="btn btn-primary" ng-click="toggleMissionsDB()">Missions </label>
</div>
<!-- Begin Missions DB -->
<div class="row" ng-show="missionsDBVisible">
<div class="col-md-offset-1 col-md-4 draggable">
<div class = "row">
<div class="window-title">
<!--Nav-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="missionsdb.html">Missions Database</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<h4 class="window_note-title">Missions</h4>
<p>Here you will find information on Nasa missions.</p>
</div>
</div>
</div>
</div>
<!-- Begin Notebook -->
<div class="row" ng-show="notebookVisible">
<div class="col-md-offset-1 col-md-4 draggable">
<div class = "row">
<div class="window-title">
<!--Nav-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<h4 class="window_note-title">notebook</h4>
<p>Notebook</p>
</div>
</div>
</div>
</div>
`