title: How can I highlight droppable areas on hover in a jquery accordian - trying to re-order Accordian sections
body: <p>I'm trying to use the JQuery Accordian with drag and drop to enable the accordian sections to be dragged and dropped to move them around and change the order.</p>
  
  <p>The section headers become draggable (when active) using a handle on the right (using font awesome icons) when you hover over them. The idea was that when you start dragging, the possible places you can drop it (e.g. above or below the other section headers) would be highlighted and when you drag over one of them it lights up green (and expands a bit) to show that it can be dropped there. The dragging is constrained vertically and within the bounds of the Accordian.</p>
  
  <p>I have the dragging working okay, and I've got the start of the droppable targets appearing but I can't get the drag over or drop functions to work correctly.</p>
  
  <p>I haven't got as far as working out how to actually swap the sections around once they are dropped - ultimately I'll want this to be based on some JSON as the sections will be dynamic.</p>
  
  <p>The html looks like this:</p>
  
  <pre><code>&lt;div id="accordion"&gt;
      &lt;h3 class="draggable"&gt;Section 1&lt;i class="grabHandle fas fa-grip-horizontal"&gt;&lt;/i&gt;&lt;/h3&gt;
      &lt;div&gt;&lt;p&gt;Some content&lt;/p&gt;&lt;/div&gt;
  
      &lt;h3 class="draggable"&gt;Section 2&lt;i class="grabHandle fas fa-grip-horizontal"&gt;&lt;/i&gt;&lt;/h3&gt;
      &lt;div&gt;&lt;p&gt;Some content&lt;/p&gt;&lt;/div&gt;
  
      &lt;h3 class="draggable"&gt;Section 3&lt;i class="grabHandle fas fa-grip-horizontal"&gt;&lt;/i&gt;&lt;/h3&gt;
      &lt;div&gt;&lt;p&gt;Some content&lt;/p&gt;&lt;/div&gt;
  
      &lt;h3 class="draggable"&gt;Section 4&lt;i class="grabHandle fas fa-grip-horizontal"&gt;&lt;/i&gt;&lt;/h3&gt;
      &lt;div&gt;&lt;p&gt;Some content&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>#accordion .grabHandle {
      display:none;
  }
  #accordion .ui-accordion-header-active:hover .grabHandle {
      float:right;
      color:#5c6bc0;
      display:block;
  }
  
  .dropTarget {
      border: 1px white dashed;
      height:1px;
      display:block;
  }
  .dropTargetActiveHover {
      background-color: rgb(142, 204, 142) !important;
      height:30px;
  
  }
  
  .ui-draggable-dragging {
      border: 1px solid rgba(255,255,255,0.25) !important;
  }
  
  
  
  .ui-accordion .ui-accordion-header {
      background-color: #9facc3;
      border: 0px;
      color: #222;
      font-family: Calibri;
      font-size: 11pt;
      z-index:100;
  }
  .ui-accordion .ui-accordion-header-active {
      background-color: #8ca1d2;
      border: 0px;
      color: #000;
      border-radius: 0 4px 4px 0;
      box-shadow: 0 2px 10px -2px #000;
      z-index:200;
  }
  .ui-accordion .ui-accordion-content {
      padding: 10px 16px 10px 16px;
      font-family: Calibri;
      font-size: 10pt;
      border: 0px;
      background-color: #9facc3;
  }
  .ui-accordion .ui-state-focus {
      outline: none;
  }
  </code></pre>
  
  <p>This is the script:</p>
  
  <pre><code>$(document).ready(function() {
    //Initialise
    $("#accordion").accordion();
  
    var p = $("#accordion").offset();
    var containmentTop = p.top;
    var containmentBottom = p.top + $("#accordion").height();
  
    var dragOptions = {
      axis: "y",
      handle: ".fa-grip-horizontal",
      containment: [0, containmentTop, 0, containmentBottom],
      revert: "invalid",
      scope: "items",
      snap: ".dropTarget",
      snapTolerance: 25,
      snapMode: "inner",
      start: function() {
        $("&lt;div class='dropTarget'&gt;&lt;/div&gt;").insertAfter("h3");
      },
      stop: function() {
        $(".dropTarget").remove();
      }
    };
    $(".draggable").draggable(dragOptions);
  
    $(".dropTarget").droppable({
      accept: '.draggable',
      over: function() {
        $(".dropTarget").addClass('dropTargetActiveHover');
      },
      drop: function() {
        alert("You dropped to div ID " + $(this).attr('id'));
      }
    });
  });
  </code></pre>