我正在使用 JqueryUI Sortable，但我无法使用句柄选项。我用错了吗？

Question

我正在尝试在 html 中制作一个 table 与其他 table 类似的 table。这将是一个包含多个小部件的页面，将由用户选择table。到目前为止它可以工作并且是 sortable，但我想让 div header 成为你拖动的句柄。

这是我的HTML。（它在 asp.net 顺便说一句）

<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>

这是我的 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();
});

问题是 handle 选项不起作用，带有 table 的整个框仍然用作 handle。无论我按在哪里，我都可以拖动它。顺便说一句，光标的东西也不起作用。所以我的问题是，我是否误解了 sortable 函数的选项是如何工作的？我试过环顾四周google，但我似乎找不到其他有同样问题的人，所以我觉得我对这件事的理解是错误的。

感谢所有花时间阅读本文并试图帮助我的人:)

Answer 1

您正确使用了 handle 选项，但没有在 HTML 中正确实现它。只有 1 个元素具有 handle class。由于这些元素已经有 class、panel-heading，因此使用它可能会更好。

请参阅以下示例。

$(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>

我正在使用 JqueryUI Sortable，但我无法使用句柄选项。我用错了吗？

I am using JqueryUI Sortable, but i can't get the handle option to work. Am i using it wrong?

html

asp.net-mvc

jquery-ui

jquery-ui-sortable