Question

所以这就是我正在研究的内容：

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

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

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

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

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

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

有什么想法吗？在此先感谢：）

Answer 1

我注意到当你拖动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>

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

1 个答案: