0

因此，这是我正在研究的内容以供参考：

http://www.ryanhammond.us/ellenpaul/index.html

如果您查看该网站，您会看到一个缩略图网格。我使用 Jquery sortables 来允许对缩略图进行重新排序。

所有的拇指都是 li 在可排序函数应用于的无序列表中

<script>
  $(function() {
    $( "ul" ).sortable({
      placeholder: "highlight"
    });
    $( "ul" ).disableSelection();
  });
</script>

我的问题是您只为所有缩略图指定了一个占位符（占位符是拖动拇指时出现的浅蓝色方块 - 它是 .highlight），并且我有两种不同的缩略图宽度。太好了，如果我将 .highlight 设置为 300px 宽度，300px 宽度的缩略图看起来很棒，但对于更薄的 200px 缩略图来说就错了。

到目前为止，我最好的想法是编写另一个 javascript 代码，该代码在单击缩略图时检测其宽度并将占位符的大小调整为该宽度......但我是 java 新手，所以我不确定这是否是最好的修复。

有任何想法吗？提前致谢 ：）

4

1 回答 1

0

我注意到，当您拖动 Div 时，会添加一个类“ui-sortable-helper”，因此如果您选择拖动后 div 的宽度，然后调整所有具有“highlight”类的 div 的大小，它应该可以工作下面是一个示例：

<script>
  $(function() {
    $( "ul" ).sortable({
      placeholder: "highlight",
      start: function(event, ui) {
        setTimeout("resize()",0);
    },
    stop: function(event, ui) {
    }
    });
    $( "ul" ).disableSelection();   
  });
function resize()
{
var width = $($(".ui-sortable-helper")[0]).css("width");
$($(".highlight")[0]).attr("style","width:"+width);
}
  </script>
于 2013-04-14T20:38:11.573 回答