引导程序是不是干扰了我的 Jqueryui 或者我错过了啥？

Posted 2023-05-08

【中文标题】引导程序是不是干扰了我的 Jqueryui 或者我错过了啥？

【英文标题】：Is bootstrap interfering with my Jqueryui or am i missing something?引导程序是否干扰了我的 Jqueryui 或者我错过了什么？

【发布时间】：2018-03-02 12:02:25

【问题描述】：

尝试将 Jqueryui 可排序交互放入 Bootstrap 表中，以便人们可以移动行来比较它们。

那么 Jqueryui 与 Bootstrap 不兼容吗？我不能将表格行放在列表中吗？比如这里有什么问题？我不理解这个问题，因为没有任何行是可排序/移动的。

html 和 JS-

    <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>
<link rel="stylesheet" href="./Bombers Hockey_files/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="./Bombers Hockey_files/bootstrap.min.js.download" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="./Bombers Hockey_files/hockey.css" rel="stylesheet" type="text/css">
<script src="./Bombers Hockey_files/jquery.min.js.download"></script>
<script src="./Bombers Hockey_files/popper.min.js.download"></script>

      <script>
      $( function() 
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
       );
      </script>

    <table class="table table-hover table-striped">
            <thead>
      <tr>
        <th>Name</th>
        <th>GP</th> 
        <th>Goals</th>
        <th>Assists</th>
        <th>Points</th>
        <th>Penalties</th>
      </tr>
    </thead>
      <tbody>
    <ul id="sortable">
    <li class="ui-state-default">
        <tr>
        <td>Adam</td>
        <td>12</td> 
        <td>2</td>
        <td>0</td>
        <td>2</td>
        <td>2</td>
      </tr>
    </li>
    <li class="ui-state-default">
      <tr>
        <td>Braden</td>
        <td>8</td> 
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>2</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>Caleb</td>
        <td>10</td> 
        <td>2</td>
        <td>1</td>
        <td>3</td>
        <td>6</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>John</td>
        <td>8</td> 
        <td>2</td>
        <td>3</td>
        <td>5</td>
        <td>8</td>
      </tr>
    </li>
    <li class="ui-state-default">
      <tr>
        <td>Ryan</td>
        <td>8</td> 
        <td>7</td>
        <td>0</td>
        <td>7</td>
        <td>26</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>Kyle</td>
        <td>10</td> 
        <td>3</td>
        <td>6</td>
        <td>9</td>
        <td>8</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>Sean</td>
        <td>8</td> 
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>8</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>Seth</td>
        <td>11</td> 
        <td>4</td>
        <td>1</td>
        <td>5</td>
        <td>47</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>Kyle Z</td>
        <td>8</td> 
        <td>2</td>
        <td>0</td>
        <td>2</td>
        <td>0</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>Gary</td>
        <td>10</td> 
        <td>7</td>
        <td>3</td>
        <td>10</td>
        <td>6</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>Mark</td>
        <td>12</td> 
        <td>6</td>
        <td>5</td>
        <td>11</td>
        <td>30</td>
      </tr>
    </li>
    <li class="ui-state-default">
       <tr>
        <td>Mike</td>
        <td>12</td> 
        <td>1</td>
        <td>6</td>
        <td>7</td>
        <td>0</td>
      </tr>
    </li>
    <li class="ui-state-default">
      <tr>
        <td>Tim</td>
        <td>1</td> 
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>2</td>
      </tr>
    </li>
    </ul>
    </tbody></table>

CSS -

 #sortable  
  list-style-type: none; margin: 0; padding: 0; width: 60%; 


 #sortable li  
  margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; 


 #sortable li span  
  position: absolute; margin-left: -1.3em; 

【参考方案1】：

尝试重新排列链接和脚本标签，看看是否可行。可能是某些东西覆盖了其他东西：

<link rel="stylesheet" href="./Bombers Hockey_files/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="./Bombers Hockey_files/hockey.css" rel="stylesheet" type="text/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>
<script src="./Bombers Hockey_files/bootstrap.min.js.download" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="./Bombers Hockey_files/jquery.min.js.download"></script>
<script src="./Bombers Hockey_files/popper.min.js.download"></script>

【讨论】：

复制并尝试了您的安排，但仍然没有。行本身甚至无法移动，这让我认为行无法放入列表项中。 Idk 这整件事让我很困惑，一直盯着代码看很久。

【参考方案2】：

在<tbody> 中使用<ul><li> 标签是无效且不必要的，因为<tr><td> 元素基本上是列表。只需将表中的<tbody> 设为可排序就可以了。

https://jsfiddle.net/66mj031n/