You are using the handle option correctly, yet not implimenting it correctly in your HTML. Only 1 element has the handle class. Since these elements already have a class, panel-heading, it might be better to use this.

See the following example.

$(function() {
  $("#sortable").sortable({
    item: "> div.gadget",
    handle: ".panel-heading",
    cursor: "move",
    axis: "y",
    opacity: "0.8"
  });
  /*
    $('input[type="checkbox"]').click(function() {
      var inputValue = $(this).attr("value");
      $("." + inputValue).toggle();
    });

    $(".wdc1").toggle();
    $(".wdc2").toggle();
    $(".wdc3").toggle();
    */
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="sortable">
  <div class="container-fluid gadget wdc1">
    <div class="row">
      <div class="col-sm-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4>Total Defect Count (Severity/Probability)</h4>
          </div>
          <div class="panel-body">
            <table class="table table-bordered table-striped" id="dtBasicExample">
              <tr>
                <th>#</th>
                <th>Impact / Probability</th>
                <th>High</th>
                <th>Medium</th>
                <th>Low</th>
                <th>Unlikely</th>
                <th>Total</th>
              </tr>
              <tr>
                <td>1</td>
                <td>Critical - Personnel safety at risk</td>
                <td>@jArray[0, 0]</td>
                <td>@jArray[0, 1]</td>
                <td>@jArray[0, 2]</td>
                <td>@jArray[0, 3]</td>
                <td>@jArray[0, 4]</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Critical - Machinery/equipment safety at risk</td>
                <td>@jArray[1, 0]</td>
                <td>@jArray[1, 1]</td>
                <td>@jArray[1, 2]</td>
                <td>@jArray[1, 3]</td>
                <td>@jArray[1, 4]</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Critical functional loss</td>
                <td>@jArray[2, 0]</td>
                <td>@jArray[2, 1]</td>
                <td>@jArray[2, 2]</td>
                <td>@jArray[2, 3]</td>
                <td>@jArray[2, 4]</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Major functional loss</td>
                <td>@jArray[3, 0]</td>
                <td>@jArray[3, 1]</td>
                <td>@jArray[3, 2]</td>
                <td>@jArray[3, 3]</td>
                <td>@jArray[3, 4]</td>
              </tr>
              <tr>
                <td>5</td>
                <td>Minor functional loss</td>
                <td>@jArray[4, 0]</td>
                <td>@jArray[4, 1]</td>
                <td>@jArray[4, 2]</td>
                <td>@jArray[4, 3]</td>
                <td>@jArray[4, 4]</td>
              </tr>
              <tr>
                <td>6</td>
                <td>Inconvenience</td>
                <td>@jArray[5, 0]</td>
                <td>@jArray[5, 1]</td>
                <td>@jArray[5, 2]</td>
                <td>@jArray[5, 3]</td>
                <td>@jArray[5, 4]</td>
              </tr>
              <tr>
                <td>7</td>
                <td>Total</td>
                <td>@jArray[6, 0]</td>
                <td>@jArray[6, 1]</td>
                <td>@jArray[6, 2]</td>
                <td>@jArray[6, 3]</td>
                <td>@jArray[6, 4]</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid gadget wdc2">
    <div class="row">
      <div class="col-sm-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4>Weighted Defect Count</h4>
          </div>
          <div class="panel-body">
            <table class="table table-bordered table-striped">
              <tr>
                <th>#</th>
                <th>Impact / Probability</th>
                <th>High</th>
                <th>Medium</th>
                <th>Low</th>
                <th>Unlikely</th>
                <th>Total</th>
              </tr>
              <tr>
                <td>1</td>
                <td>Critical - Personnel safety at risk</td>
                <td class="bg_red">@jArrayCalculated[0, 0]</td>
                <td class="bg_red">@jArrayCalculated[0, 1]</td>
                <td class="bg_red">@jArrayCalculated[0, 2]</td>
                <td class="bg_red">@jArrayCalculated[0, 3]</td>
                <td>@jArrayCalculated[0, 4]</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Critical - Machinery/equipment safety at risk</td>
                <td class="bg_red">@jArrayCalculated[1, 0]</td>
                <td class="bg_red">@jArrayCalculated[1, 1]</td>
                <td class="bg_red">@jArrayCalculated[1, 2]</td>
                <td class="bg_red">@jArrayCalculated[1, 3]</td>
                <td>@jArrayCalculated[1, 4]</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Critical functional loss</td>
                <td class="bg_red">@jArrayCalculated[2, 0]</td>
                <td class="bg_red">@jArrayCalculated[2, 1]</td>
                <td class="bg_orange">@jArrayCalculated[2, 2]</td>
                <td class="bg_yellow">@jArrayCalculated[2, 3]</td>
                <td>@jArrayCalculated[2, 4]</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Major functional loss</td>
                <td class="bg_red">@jArrayCalculated[3, 0]</td>
                <td class="bg_red">@jArrayCalculated[3, 1]</td>
                <td class="bg_yellow">@jArrayCalculated[3, 2]</td>
                <td class="bg_grey">@jArrayCalculated[3, 3]</td>
                <td>@jArrayCalculated[3, 4]</td>
              </tr>
              <tr>
                <td>5</td>
                <td>Minor functional loss</td>
                <td class="bg_orange">@jArrayCalculated[4, 0]</td>
                <td class="bg_yellow">@jArrayCalculated[4, 1]</td>
                <td class="bg_grey">@jArrayCalculated[4, 2]</td>
                <td class="bg_grey">@jArrayCalculated[4, 3]</td>
                <td>@jArrayCalculated[4, 4]</td>
              </tr>
              <tr>
                <td>6</td>
                <td>Inconvenience</td>
                <td class="bg_yellow">@jArrayCalculated[5, 0]</td>
                <td class="bg_grey">@jArrayCalculated[5, 1]</td>
                <td class="bg_grey">@jArrayCalculated[5, 2]</td>
                <td class="bg_grey">@jArrayCalculated[5, 3]</td>
                <td>@jArrayCalculated[5, 4]</td>
              </tr>
              <tr>
                <td>7</td>
                <td>Total</td>
                <td>@jArrayCalculated[6, 0]</td>
                <td>@jArrayCalculated[6, 1]</td>
                <td>@jArrayCalculated[6, 2]</td>
                <td>@jArrayCalculated[6, 3]</td>
                <td>@jArrayCalculated[6, 4]</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid gadget wdc3">
    <div class="row">
      <div class="col-sm-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4>Weighted Defect Count Table 3</h4>
          </div>
          <div class="panel-body">
            <table class="table table-bordered table-striped">
              <tr>
                <th>#</th>
                <th>Impact / Probability</th>
                <th>High</th>
                <th>Medium</th>
                <th>Low</th>
                <th>Unlikely</th>
                <th>Total</th>
              </tr>
              <tr>
                <td>1</td>
                <td>Critical - Personnel safety at risk</td>
                <td class="bg_red">0</td>
                <td class="bg_red">0</td>
                <td class="bg_red">0</td>
                <td class="bg_red">0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Critical - Machinery/equipment safety at risk</td>
                <td class="bg_red">0</td>
                <td class="bg_red">0</td>
                <td class="bg_red">0</td>
                <td class="bg_red">0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Critical functional loss</td>
                <td class="bg_red">0</td>
                <td class="bg_red">0</td>
                <td class="bg_orange">0</td>
                <td class="bg_yellow">0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Major functional loss</td>
                <td class="bg_red">0</td>
                <td class="bg_red">0</td>
                <td class="bg_yellow">0</td>
                <td class="bg_grey">0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>5</td>
                <td>Minor functional loss</td>
                <td class="bg_orange">0</td>
                <td class="bg_yellow">0</td>
                <td class="bg_grey">0</td>
                <td class="bg_grey">0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>6</td>
                <td>Inconvenience</td>
                <td class="bg_yellow">0</td>
                <td class="bg_grey">0</td>
                <td class="bg_grey">0</td>
                <td class="bg_grey">0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>7</td>
                <td>Total</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I am trying to make a table in html that will be sortable with other tables like it. It will be a page with multible widgets that will be sortable by the user. So far it works and is sortable, but i want to have the div header be the handle where you drag.

Here is my HTML. (it’s in asp.net btw)

<div id="sortable">
    <div class="container-fluid gadget wdc1">
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading handle">
                        <h4>Total Defect Count (Severity/Probability)</h4>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered table-striped" id="dtBasicExample">
                            <tr>
                                <th>#</th>
                                <th>Impact / Probability</th>
                                <th>High</th>
                                <th>Medium</th>
                                <th>Low</th>
                                <th>Unlikely</th>
                                <th>Total</th>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Critical - Personnel safety at risk</td>
                                <td>@jArray[0, 0]</td>
                                <td>@jArray[0, 1]</td>
                                <td>@jArray[0, 2]</td>
                                <td>@jArray[0, 3]</td>
                                <td>@jArray[0, 4]</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Critical - Machinery/equipment safety at risk</td>
                                <td>@jArray[1, 0]</td>
                                <td>@jArray[1, 1]</td>
                                <td>@jArray[1, 2]</td>
                                <td>@jArray[1, 3]</td>
                                <td>@jArray[1, 4]</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Critical functional loss</td>
                                <td>@jArray[2, 0]</td>
                                <td>@jArray[2, 1]</td>
                                <td>@jArray[2, 2]</td>
                                <td>@jArray[2, 3]</td>
                                <td>@jArray[2, 4]</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Major functional loss</td>
                                <td>@jArray[3, 0]</td>
                                <td>@jArray[3, 1]</td>
                                <td>@jArray[3, 2]</td>
                                <td>@jArray[3, 3]</td>
                                <td>@jArray[3, 4]</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Minor functional loss</td>
                                <td>@jArray[4, 0]</td>
                                <td>@jArray[4, 1]</td>
                                <td>@jArray[4, 2]</td>
                                <td>@jArray[4, 3]</td>
                                <td>@jArray[4, 4]</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Inconvenience</td>
                                <td>@jArray[5, 0]</td>
                                <td>@jArray[5, 1]</td>
                                <td>@jArray[5, 2]</td>
                                <td>@jArray[5, 3]</td>
                                <td>@jArray[5, 4]</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>Total</td>
                                <td>@jArray[6, 0]</td>
                                <td>@jArray[6, 1]</td>
                                <td>@jArray[6, 2]</td>
                                <td>@jArray[6, 3]</td>
                                <td>@jArray[6, 4]</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid gadget wdc2">
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Weighted Defect Count</h4>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered table-striped">
                            <tr>
                                <th>#</th>
                                <th>Impact / Probability</th>
                                <th>High</th>
                                <th>Medium</th>
                                <th>Low</th>
                                <th>Unlikely</th>
                                <th>Total</th>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Critical - Personnel safety at risk</td>
                                <td class="bg_red">@jArrayCalculated[0, 0]</td>
                                <td class="bg_red">@jArrayCalculated[0, 1]</td>
                                <td class="bg_red">@jArrayCalculated[0, 2]</td>
                                <td class="bg_red">@jArrayCalculated[0, 3]</td>
                                <td>@jArrayCalculated[0, 4]</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Critical - Machinery/equipment safety at risk</td>
                                <td class="bg_red">@jArrayCalculated[1, 0]</td>
                                <td class="bg_red">@jArrayCalculated[1, 1]</td>
                                <td class="bg_red">@jArrayCalculated[1, 2]</td>
                                <td class="bg_red">@jArrayCalculated[1, 3]</td>
                                <td>@jArrayCalculated[1, 4]</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Critical functional loss</td>
                                <td class="bg_red">@jArrayCalculated[2, 0]</td>
                                <td class="bg_red">@jArrayCalculated[2, 1]</td>
                                <td class="bg_orange">@jArrayCalculated[2, 2]</td>
                                <td class="bg_yellow">@jArrayCalculated[2, 3]</td>
                                <td>@jArrayCalculated[2, 4]</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Major functional loss</td>
                                <td class="bg_red">@jArrayCalculated[3, 0]</td>
                                <td class="bg_red">@jArrayCalculated[3, 1]</td>
                                <td class="bg_yellow">@jArrayCalculated[3, 2]</td>
                                <td class="bg_grey">@jArrayCalculated[3, 3]</td>
                                <td>@jArrayCalculated[3, 4]</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Minor functional loss</td>
                                <td class="bg_orange">@jArrayCalculated[4, 0]</td>
                                <td class="bg_yellow">@jArrayCalculated[4, 1]</td>
                                <td class="bg_grey">@jArrayCalculated[4, 2]</td>
                                <td class="bg_grey">@jArrayCalculated[4, 3]</td>
                                <td>@jArrayCalculated[4, 4]</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Inconvenience</td>
                                <td class="bg_yellow">@jArrayCalculated[5, 0]</td>
                                <td class="bg_grey">@jArrayCalculated[5, 1]</td>
                                <td class="bg_grey">@jArrayCalculated[5, 2]</td>
                                <td class="bg_grey">@jArrayCalculated[5, 3]</td>
                                <td>@jArrayCalculated[5, 4]</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>Total</td>
                                <td>@jArrayCalculated[6, 0]</td>
                                <td>@jArrayCalculated[6, 1]</td>
                                <td>@jArrayCalculated[6, 2]</td>
                                <td>@jArrayCalculated[6, 3]</td>
                                <td>@jArrayCalculated[6, 4]</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid gadget wdc3">
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Weighted Defect Count Table 3</h4>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered table-striped">
                            <tr>
                                <th>#</th>
                                <th>Impact / Probability</th>
                                <th>High</th>
                                <th>Medium</th>
                                <th>Low</th>
                                <th>Unlikely</th>
                                <th>Total</th>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Critical - Personnel safety at risk</td>
                                <td class="bg_red">0</td>
                                <td class="bg_red">0</td>
                                <td class="bg_red">0</td>
                                <td class="bg_red">0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Critical - Machinery/equipment safety at risk</td>
                                <td class="bg_red">0</td>
                                <td class="bg_red">0</td>
                                <td class="bg_red">0</td>
                                <td class="bg_red">0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Critical functional loss</td>
                                <td class="bg_red">0</td>
                                <td class="bg_red">0</td>
                                <td class="bg_orange">0</td>
                                <td class="bg_yellow">0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Major functional loss</td>
                                <td class="bg_red">0</td>
                                <td class="bg_red">0</td>
                                <td class="bg_yellow">0</td>
                                <td class="bg_grey">0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Minor functional loss</td>
                                <td class="bg_orange">0</td>
                                <td class="bg_yellow">0</td>
                                <td class="bg_grey">0</td>
                                <td class="bg_grey">0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Inconvenience</td>
                                <td class="bg_yellow">0</td>
                                <td class="bg_grey">0</td>
                                <td class="bg_grey">0</td>
                                <td class="bg_grey">0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>Total</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And here is my Jquery

$(document).ready(function () {
    $("#sortable").sortable({
        handle: ".handle",
        cursor: "move",
        axis: "y",
        opacity: "0.8"
    });

    $('input[type="checkbox"]').click(function () {
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });

    $(".wdc1").toggle();
    $(".wdc2").toggle();
    $(".wdc3").toggle();
});

The problem is that the handle option doesn’t work, and the whole box with the table still works as a handle. No matter where i press i can drag the thing. The cursor thing doesn’t work either btw. So my question is, am i misunderstanding how the options work for the sortable function? i have tried looking around google, and i can’t seem to find other people with the same problem, so i get the feeling that i am understanding this thing wrongly.

Thanks to anyone who took their time to read this and tries to help me 🙂