0

我有一个令人困惑的时间来排序以正常运行：

这如我所料：

<ul class="unstyled" id="resource-list">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>


$("#resource-list").sortable()
$("#resource-list").disableSelection()

但这不是

<ul class="unstyled" id="resource-list">
 <li>
 <div class="span3">
  <button class="btn btn-link"><i class="icon-remove"></i></button>
 </div>
 <div class="span9">
      <img class="img-polaroid" src="https:s3.etc.grover-00001.png">
     </div>
 </li>
 <li>
 <div class="span3">
  <button class="btn btn-link"><i class="icon-remove"></i></button>
 </div>
 <div class="span9">
      <img class="img-polaroid" src="https:s3.etc.grover-00002.png"></div>
 </li>
 <li>
 <div class="span3">
  <button class="btn btn-link"> <i class="icon-remove"></i></button>
 </div>
 <div class="span9">
       <img class="img-polaroid" src="https:s3.etc.grover-00003.png">
     </div>
 </li>
</ul>

$("#resource-list").sortable()
$("#resource-list").disableSelection()

在第二种情况下，<li>s渲染正确，并且似乎或多或少地像预期的那样拖动，但是当释放时，列表恢复到原来的顺序。排序、创建和停止事件正在触发，但更新没有。

现在我在这里试了一下，它排序正确。

我在这里使用引导程序和流星，如果这看起来相关的话。

4

1 回答 1

0

我发现可排序的交互使用以像素为单位的位置、列表项的宽度和高度来知道鼠标何时悬停在列表内的元素上，因此，决定将被丢弃的位置被拖动的项目。我猜如果你把<div>'s 放在 's 里面<li>，除了里面没有任何东西，那么它会弄得一团糟并且<li>'s 没有合适的高度，所以 jQuery UI 无法知道你是否在里面<ul>以及列表项之间的哪个位置指向鼠标。

我发现你可以修复它（至少对于 chorme），如果你在<li>'s 中设置一个固定高度，或者你只是将 a放在 's&nbsp;里面<li>但在<div>'s 外面。我个人更喜欢第一个解决方案，但我认为，在您的情况下，第二个解决方案会更有用：

<ul class="unstyled" id="resource-list">
    <li>&nbsp;
        <div class="span3">
            <button class="btn btn-link"><i class="icon-remove"></i></button>
        </div>
        <div class="span9">
            <img class="img-polaroid" src="https://s3.amazonaws.com/lipwriting/grover-00001.png">
        </div>
    </li>
    <li>&nbsp;
        <div class="span3">
            <button class="btn btn-link"><i class="icon-remove"></i></button>
        </div>
        <div class="span9">
            <img class="img-polaroid" src="https://s3.amazonaws.com/lipwriting/grover-00002.png">
        </div>
    </li>
    <li>&nbsp;
        <div class="span3">
            <button class="btn btn-link"> <i class="icon-remove"></i></button>
        </div>
        <div class="span9">
            <img class="img-polaroid" src="https://s3.amazonaws.com/lipwriting/grover-00003.png">
        </div>
    </li>
</ul>
<script language="Javascript">
$("#resource-list").sortable()
$("#resource-list").disableSelection()
</script>
于 2013-07-08T06:49:29.620 回答