Question

我想用缩略图创建两个网格，并能够将缩略图从一个网格移动到另一个网格。但是有一个问题。

查看示例

$(function() {
    $( ".sortable" ).sortable({
        connectWith:'.sortable'
    });
    $( ".sortable" ).disableSelection();
});

  <table>
  <tr>
    <td class="sortable">
            <div class="ui-state-default">1</div>
            <div class="ui-state-default">2</div>
            <div class="ui-state-default">3</div>
            <div class="ui-state-default">4</div>
            <div class="ui-state-default">5</div>
            <div class="ui-state-default">6</div>
            <div class="ui-state-default">7</div>
            <div class="ui-state-default">8</div>
            <div class="ui-state-default">9</div>
            <div class="ui-state-default">10</div>
            <div class="ui-state-default">11</div>
            <div class="ui-state-default">12</div>
    </td>
    <td class="sortable">
            <div class="ui-state-default">1</div>
            <div class="ui-state-default">2</div>
            <div class="ui-state-default">3</div>
            <div class="ui-state-default">4</div>
            <div class="ui-state-default">5</div>
            <div class="ui-state-default">6</div>
            <div class="ui-state-default">7</div>
            <div class="ui-state-default">8</div>
            <div class="ui-state-default">9</div>
            <div class="ui-state-default">10</div>
            <div class="ui-state-default">11</div>
            <div class="ui-state-default">12</div>
    </td>
  </tr>
  </table>

如果您尝试移动缩略图，您将看到令人不快的闪烁效果。

请告诉我为什么会这样。

Answer 1

问题似乎与排序和margin的jQueryUI代码处理有关。如果您将CSS更改为margin: 0px 0px 0px 0，则问题就会消失。

小提琴

http://jsfiddle.net/XynWR/

可能应该将其作为错误提交给UI人员。

缩略图上的两个网格可以解决问题

1 个答案: