title: Draggable property lost after expanding node with bootstrap-treeview
body: <p>I am trying to develop a widget for a web application in which the user can drag and drop items from a hierarchical list into a div. For the list I am using the well know <a href="https://github.com/jonmiles/bootstrap-treeview" rel="nofollow noreferrer">bootstrap-treeview plugin</a> and for the drag and drop feature JQuery UI draggable and droppable functions. </p>
  
  <p>It works well after page load, the items in the list can be dragged. However, as soon as I expand one of the list items, they can be dragged no longer. </p>
  
  <p>I've tried to re-add the draggable handle using the expandNode event listener, but it does not work. I've also checked that event is being fired, but for some reason the draggable condition is not attached again to the list items.</p>
  
  <p>You can check the minimal code reproducing the error in <a href="https://jsfiddle.net/xemy50e3/1/" rel="nofollow noreferrer">this JSFiddle</a>.</p>
  
  <p>Any idea about what am I doing wrong?</p>
  
  <p>Below all the code for completeness.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"&gt;
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" type="text/javascript"&gt;&lt;/script&gt;        
  
          &lt;style&gt;
              .item-list {
                height: 8em;
                color: black;
              }
  
              .droppable-area {
                height: 8em;
                outline: 2px dashed blue;
              }
          &lt;/style&gt;
  
      &lt;/head&gt;
  
  
  
      &lt;body&gt;
          &lt;div class="container"&gt;
            &lt;div class="row"&gt;
              &lt;p&gt;
              Item list:
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-6" id="item-list"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 droppable-area"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  
      &lt;script type="text/javascript"&gt;
          var enableDraggables = function(event, data) {
            $(".node-item-list").draggable({
              opacity: 0.7,
              helper: "clone",
              revert: true
              }); 
              return true;
          };
  
          var itemTree = [
              { text: "item 1", nodes:[{text: "subitem 1-1"},{text: "subitem 1-2"}]},
            { text: "item 2", nodes:[{text: "subitem 2-1"},{text: "subitem 2-2"},{text: "subitem 2-3"}]},
            { text: "item 3" }
          ];
  
          $("#item-list").treeview({
            data: itemTree,
            expandIcon: "glyphicon glyphicon-chevron-right",
            collapseIcon: "glyphicon glyphicon-chevron-down",
            onNodeSelected: enableDraggables,
            onNodeUnselected: enableDraggables,
            onNodeChecked: enableDraggables,
            onNodeUnchecked: enableDraggables,
            onNodeCollapsed: enableDraggables,
            onNodeExpanded: enableDraggables
          });
          $("#item-list").treeview('collapseAll', {
            silent: true
          });
  
          enableDraggables();
  
          $(".droppable-area").droppable({
            accept: ".node-item-list"
          });
  
  
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>