0

そこで、参考までに以下の作業を行っています。

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

Web サイトを見ると、サムネイルのグリッドが表示されます。サムネイルを並べ替えることができるように、Jquery sortables を使用しました。

すべてのサムは、sortables 関数が適用される順序付けられていないリスト内の li です。

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

私の問題は、すべてのサムネイルに対してプレースホルダーを 1 つだけ指定することです (プレースホルダーは、親指をドラッグすると表示される水色の四角形で、.highlight です)。2 つの異なるサムネイル幅があります。.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 に答える