试图在单击时调整一个div的大小以匹配另一个div的宽度

Question

这是我正在做的参考:

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

如果你看这个网站，你会看到一个缩略图的网格。我使用Jquery排序表来重新排序缩略图。

所有的拇指都是无序列表中的li, sortables函数应用于

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

我的问题是，你只指定一个占位符为所有缩略图(占位符是浅蓝色的正方形，当你拖动一个拇指-它是。highlight)，我有两个不同的缩略图宽度。所以，如果我把。highlight的宽度设置为300px, 300px的缩略图看起来很好，但是200px的缩略图就不太好了。

到目前为止，我最好的想法是编写另一个javascript代码来检测缩略图的宽度，当它被点击并调整占位符的宽度…但是我是java的新手，所以我不确定这是否是最好的修复。

任何想法?提前感谢:)

Answer 1

我注意到，当你拖动div有一个类"ui-sortable-helper"添加在它上面，所以如果你选择div的宽度一旦拖动，然后调整所有div的大小有类"highlight"，它应该工作下面是一个例子:

<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>