jQuery UI Sortable 不能与引导模式框一起使用？答案

【问题标题】：jQuery UI Sortable not working with bootstrap modal box?jQuery UI Sortable 不能与引导模式框一起使用？
【发布时间】：2015-11-26 08:17:37
【问题描述】：

我想将 jQuery Sortable 与引导模式框一起使用。我已经包含了所有文件，但它根本不起作用。没有模态框，它工作正常。这是我的示例代码

<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
      <div class="sortable-wrap">
          <ul id="sortable">
              <li class="ui-state-default">Item 1</li>
              <li class="ui-state-default">Item 2</li>
              <li class="ui-state-default">Item 3</li>
              <li class="ui-state-default">Item 4</li>
              <li class="ui-state-default">Item 5</li>
              <li class="ui-state-default">Item 6</li>
              <li class="ui-state-default">Item 7</li>
          </ul>
      </div> 
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

JS 代码是这样的

jQuery( "#sortable" ).sortable();

如果有人想检查，这里是fiddle link。

那么有人可以告诉我为什么 sortable 在这里不起作用吗？如何使它在这里可行？任何建议或建议都会非常可观。谢谢

【问题讨论】：

你是在尝试小提琴还是在本地尝试。
我第一次尝试在我的本地主机上。它不起作用，这就是我做小提琴的原因。

标签： javascript jquery twitter-bootstrap jquery-ui

【解决方案1】：

Your code works fine. Just check JQuery UI 1.9.2 to import the library.

Demo

【讨论】：

@Codeone 我有一个类似的question。我想知道你是否可以给我指点。

【解决方案2】：

我认为您的代码没有任何问题。但如果你做这样的事情，我会推荐。

$("#myModal").on("shown",function(){
  $( "#myModal #sortable" ).sortable();
})

然后在你的小提琴中导入 jQuery Ui。

【讨论】：