githab
/
bootstrap-table


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660
							<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Table Reorder Rows extension of Bootstrap Table.">
<meta name="author" content="Zhixin Wen, and Bootstrap Table contributors">
<meta name="generator" content="Jekyll v3.8.7">
<meta name="keywords" content="bootstrap,table,pagination,checkbox,radio,datatables,css,css-framework,semantic,semantic-ui,bulma,material,material-design,materialize,foundation">

<meta name="docsearch:language" content="en">

<title>Table Reorder Rows · Bootstrap Table</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"><!-- Documentation extras -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">


<link rel="stylesheet" href="/assets/css/docs.min.css">
<link rel="stylesheet" href="/assets/css/style.css?m=9">

<!-- Favicons -->
<link rel="icon" href="/favicon.png">


<script type="text/javascript">
  if (window !== top) // 判断当前的 window 对象是否是 top 对象
    top.location.href = window.location.href // 如果不是，将 top 对象的网址自动导向被嵌入网页的网址
</script>

  </head>
  <body>
    <a class="skippy sr-only sr-only-focusable" href="#content">
  <span class="skippy-text">Skip to main content</span>
</a>


    <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
  <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
    <img src="/favicon.png" width="36" height="36">
  </a>

  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item">
        <a class="nav-link "
          href="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active"
          href="/docs/getting-started/introduction/">
          Documentation
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/themes">
          Themes
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link "
          href="https://examples.bootstrap-table.com">
          Examples
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
          href="https://live.bootstrap-table.com"
          target="_blank">
          Online Editor
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/news">
          News
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
          href="https://blog.bootstrap-table.com"
          target="_blank">
          Blog
        </a>
      </li>
    </ul>
  </div>

  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown">
      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        v1.23.5
      </a>
      <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
        <a class="dropdown-item active" href="/">Latest (1.23.5)</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.21.4/" target="_blank">v1.21.4</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.20.2/" target="_blank">v1.20.2</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.19.1/" target="_blank">v1.19.1</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.18.3/" target="_blank">v1.18.3</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.17.1/" target="_blank">v1.17.1</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.16.0/" target="_blank">v1.16.0</a>
        
        <a class="dropdown-item" href="http://bootstrap-table.com/versions/1.15.5/" target="_blank">v1.15.5</a>
        
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://github.com/wenzhixin/bootstrap-table" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false" role="img"><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://twitter.com/wenzhixin2010" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false" role="img"><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://opencollective.com/bootstrap-table" target="_blank" rel="noopener" aria-label="Open Collective"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 40 41" focusable="false" role="img" fill="currentColor" fill-rule="evenodd"><title>Open Collective</title><path d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" fill-opacity=".4"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
</a>
    </li>
  </ul>

  <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3"
    href="/docs/getting-started/download/">Download</a>
</header>


    <div class="container-fluid">
      <div class="row flex-xl-nowrap">
        <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
          <form class="bd-search d-flex align-items-center">
  <input type="search" class="form-control"
    id="search-input" placeholder="Search..."
    aria-label="Search for..." autocomplete="off">
  <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3"
    type="button" data-toggle="collapse" data-target="#bd-docs-nav"
    aria-controls="bd-docs-nav" aria-expanded="false"
    aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>

<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/getting-started/introduction/">
      Getting started
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/getting-started/introduction/">
            Introduction
          </a>
        </li><li>
          <a href="/docs/getting-started/download/">
            Download
          </a>
        </li><li>
          <a href="/docs/getting-started/contents/">
            Contents
          </a>
        </li><li>
          <a href="/docs/getting-started/usage/">
            Usage
          </a>
        </li><li>
          <a href="/docs/getting-started/browsers-devices/">
            Browsers & devices
          </a>
        </li><li>
          <a href="/docs/getting-started/build-tools/">
            Build tools
          </a>
        </li></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/api/table-options/">
      API
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/api/table-options/">
            Table Options
          </a>
        </li><li>
          <a href="/docs/api/column-options/">
            Column Options
          </a>
        </li><li>
          <a href="/docs/api/events/">
            Events
          </a>
        </li><li>
          <a href="/docs/api/methods/">
            Methods
          </a>
        </li><li>
          <a href="/docs/api/localizations/">
            Localizations
          </a>
        </li></ul>
  </div><div class="bd-toc-item active">
    <a class="bd-toc-link" href="/docs/extensions/addrbar/">
      Extensions
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/extensions/addrbar/">
            Addrbar
          </a>
        </li><li>
          <a href="/docs/extensions/auto-refresh/">
            Auto Refresh
          </a>
        </li><li>
          <a href="/docs/extensions/cookie/">
            Cookie
          </a>
        </li><li>
          <a href="/docs/extensions/copy-rows/">
            Copy Rows
          </a>
        </li><li>
          <a href="/docs/extensions/custom-view/">
            Custom View
          </a>
        </li><li>
          <a href="/docs/extensions/defer-url/">
            Defer URL
          </a>
        </li><li>
          <a href="/docs/extensions/editable/">
            Editable
          </a>
        </li><li>
          <a href="/docs/extensions/export/">
            Export
          </a>
        </li><li>
          <a href="/docs/extensions/filter-control/">
            Filter Control
          </a>
        </li><li>
          <a href="/docs/extensions/fixed-columns/">
            Fixed Columns
          </a>
        </li><li>
          <a href="/docs/extensions/group-by-v2/">
            Group By v2
          </a>
        </li><li>
          <a href="/docs/extensions/i18n-enhance/">
            i18n Enhance
          </a>
        </li><li>
          <a href="/docs/extensions/key-events/">
            Key Events
          </a>
        </li><li>
          <a href="/docs/extensions/mobile/">
            Mobile
          </a>
        </li><li>
          <a href="/docs/extensions/multiple-sort/">
            Multiple Sort
          </a>
        </li><li>
          <a href="/docs/extensions/page-jump-to/">
            Page Jump To
          </a>
        </li><li>
          <a href="/docs/extensions/pipeline/">
            Pipeline
          </a>
        </li><li>
          <a href="/docs/extensions/print/">
            Print
          </a>
        </li><li>
          <a href="/docs/extensions/reorder-columns/">
            Reorder Columns
          </a>
        </li><li class="active bd-sidenav-active">
          <a href="/docs/extensions/reorder-rows/">
            Reorder Rows
          </a>
        </li><li>
          <a href="/docs/extensions/resizable/">
            Resizable
          </a>
        </li><li>
          <a href="/docs/extensions/sticky-header/">
            Sticky Header
          </a>
        </li><li>
          <a href="/docs/extensions/toolbar/">
            Toolbar
          </a>
        </li><li>
          <a href="/docs/extensions/treegrid/">
            Treegrid
          </a>
        </li></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/vuejs/introduction/">
      VueJS
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/vuejs/introduction/">
            Introduction
          </a>
        </li><li>
          <a href="/docs/vuejs/browser/">
            Browser
          </a>
        </li><li>
          <a href="/docs/vuejs/webpack/">
            Webpack
          </a>
        </li><li>
          <a href="/docs/vuejs/component/">
            Component
          </a>
        </li></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/online-editor/">
      Online Editor
    </a>

    <ul class="nav bd-sidenav"></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/faq/">
      FAQ
    </a>

    <ul class="nav bd-sidenav"></ul>
  </div><div class="bd-toc-item">
    <a class="bd-toc-link" href="/docs/about/overview/">
      About
    </a>

    <ul class="nav bd-sidenav"><li>
          <a href="/docs/about/overview/">
            Overview
          </a>
        </li><li>
          <a href="/docs/about/team/">
            Team
          </a>
        </li><li>
          <a href="/docs/about/license/">
            License
          </a>
        </li><li>
          <a href="/docs/about/translations/">
            Translations
          </a>
        </li></ul>
  </div></nav>

        </div>

        
          <div class="d-none d-xl-block col-xl-2 bd-toc">
            <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#usage">Usage</a></li>
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#options">Options</a>
<ul>
<li class="toc-entry toc-h3"><a href="#reorderablerows">reorderableRows</a></li>
<li class="toc-entry toc-h3"><a href="#onallowdrop">onAllowDrop</a></li>
<li class="toc-entry toc-h3"><a href="#ondragstop">onDragStop</a></li>
<li class="toc-entry toc-h3"><a href="#ondragstyle">onDragStyle</a></li>
<li class="toc-entry toc-h3"><a href="#ondragclass">onDragClass</a></li>
<li class="toc-entry toc-h3"><a href="#ondropstyle">onDropStyle</a></li>
<li class="toc-entry toc-h3"><a href="#onreorderrowsdrag">onReorderRowsDrag</a></li>
<li class="toc-entry toc-h3"><a href="#onreorderrowsdrop">onReorderRowsDrop</a></li>
<li class="toc-entry toc-h3"><a href="#draghandle">dragHandle</a></li>
<li class="toc-entry toc-h3"><a href="#userowattrfunc">useRowAttrFunc</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#events">Events</a>
<ul>
<li class="toc-entry toc-h3"><a href="#onreorderrowreorder-rowbstable">onReorderRow(reorder-row.bs.table)</a></li>
</ul>
</li>
</ul>
          </div>
        

        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content extensions" role="main">
          <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
            <a class="btn btn-sm btn-bd-light mb-2 mb-md-0"
              
              href="https://github.com/wenzhixin/bootstrap-table/blob/develop/site/docs/extensions/reorder-rows.md"
              
              title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
            <h1 class="bd-title" id="content">
              Table Reorder Rows
            </h1>
          </div>
          <p class="bd-lead">Table Reorder Rows extension of Bootstrap Table.</p>
          <div id="gg"></div>

          <p>Dependence: <a href="https://github.com/isocra/TableDnD">tablednd</a> v0.9</p>

<p>if you want you can include the bootstrap-table-reorder-rows.css file to use the default dragClass.</p>

<h2 id="usage">Usage</h2>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"extensions/reorder-rows/bootstrap-table-reorder-rows.css"</span><span class="nt">&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">".../jquery.tablednd.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"extensions/reorder-rows/bootstrap-table-reorder-rows.js"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>

<h2 id="example">Example</h2>

<p><a href="https://examples.bootstrap-table.com/#extensions/reorder-rows.html">Reorder Rows</a></p>

<h2 id="options">Options</h2>

<h3 id="reorderablerows">reorderableRows</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-reorderable-rows</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Set true to allow the reorder feature.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
</ul>

<h3 id="onallowdrop">onAllowDrop</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-on-allow-drop</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Pass a function that will be called as a row over another row. If the function returns true, allow dropping on that row, otherwise not. The function takes 4 parameters:</p>
    <ul>
      <li>the dragged-row data</li>
      <li>the data of the row under the cursor</li>
      <li>the dragged row</li>
      <li>the row under the cursor</li>
    </ul>

    <p>It returns a boolean: true allows the drop, false doesn’t allow it.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">null</code></p>
  </li>
</ul>

<h3 id="ondragstop">onDragStop</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-on-drag-stop</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Pass a function that will be called when the user stops dragging regardless of if the rows have been rearranged. The function takes 3 parameters: the table, the row data and the row which the user was dragging.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">null</code></p>
  </li>
</ul>

<h3 id="ondragstyle">onDragStyle</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-on-drag-style</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>This is the style that is assigned to the row during drag. There are limitations to the styles that can be associated with a row (such as you can’t assign a border well you can, but it won’t be displayed).</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">null</code></p>
  </li>
</ul>

<h3 id="ondragclass">onDragClass</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-on-drag-class</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>This class is added for the duration of the drag and then removed when the row is dropped. It is more flexible than using onDragStyle since it can be inherited by the row cells and other content.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">reorder-rows-on-drag-class</code></p>
  </li>
</ul>

<h3 id="ondropstyle">onDropStyle</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-on-drop-style</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations to what you can do. Also, this replaces the original style, so again consider using onDragClass which is simply added and then removed on drop.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">null</code></p>
  </li>
</ul>

<h3 id="onreorderrowsdrag">onReorderRowsDrag</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-on-reorder-rows-drag</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Pass a function that will be called when the user starts dragging. The function takes 1 parameter: the row which the user has started to drag.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">empty function</code></p>
  </li>
</ul>

<h3 id="onreorderrowsdrop">onReorderRowsDrop</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-on-reorder-rows-drop</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">Function</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>Pass a function that will be called when the row is dropped. The function takes 1 parameter:  the row that was dropped.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">empty function</code></p>
  </li>
</ul>

<h3 id="draghandle">dragHandle</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-drag-handle</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">String</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>This is the cursor element.</p>

    <p><strong>Note: This option is mainly used to adapt to the <code class="highlighter-rouge">TableDnD</code> plugin. Under no special circumstances, please do not modify the default value.</strong></p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">&gt;tbody&gt;tr&gt;td:not(.bs-checkbox)</code></p>
  </li>
</ul>

<h3 id="userowattrfunc">useRowAttrFunc</h3>

<ul>
  <li>
    <p><strong>attribute:</strong> <code class="highlighter-rouge">data-use-row-attr-func</code></p>
  </li>
  <li>
    <p><strong>type:</strong> <code class="highlighter-rouge">Boolean</code></p>
  </li>
  <li>
    <p><strong>Detail:</strong></p>

    <p>This function must be used if your <code class="highlighter-rouge">tr</code> elements won’t have the <code class="highlighter-rouge">id</code> attribute. If your <code class="highlighter-rouge">tr</code> elements don’t have the <code class="highlighter-rouge">id</code> attribute this plugin doesn’t fire the onDrop event.</p>
  </li>
  <li>
    <p><strong>Default:</strong> <code class="highlighter-rouge">false</code></p>
  </li>
</ul>

<h2 id="events">Events</h2>

<h3 id="onreorderrowreorder-rowbstable">onReorderRow(reorder-row.bs.table)</h3>

<p>Fired when the row was dropped, receives two parameters:</p>
<ul>
  <li>The new table data</li>
  <li>The dropped row</li>
  <li>The row of the old position</li>
</ul>

        </main>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
$(function () {
  $('.bd-content.api a').attr('target', '_blank')
})
</script><script src="https://gg.wenzhixin.net.cn/bootstrap-table/gg.js"></script>
<script src="/assets/js/docs.min.js?m=1"></script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132747866-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {window.dataLayer.push(arguments)}
  gtag('js', new Date())
  gtag('config', 'UA-132747866-1')
</script>

  </body>
</html>