2

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>

`

Lisa
  • 2,809
  • 3
  • 24
  • 37
  • So I switched to use jQuery, and it works now! I got the idea from these two posts: http://stackoverflow.com/questions/14055639/drag-multiple-elements-with-jquery-event-drag ; http://stackoverflow.com/questions/5217311/setting-z-index-on-draggable-elements – Lisa Jan 20 '16 at 04:26

0 Answers0