2

私はこれに何時間も取り組んできましたが、それを理解することはできません.

jquerydraggableが接続された div がたくさんあるので、それらの位置は常に変化しているとしましょう。

今、私はそれらを垂直に配置できるようにしたいので、各 div 間のスペースは同じになります。最大の問題の 1 つは、各 div の高さも変化し続けることです。

正しくやろうとするたびに、100 行ほどのコードを書くだけで、混乱してしまいます。簡単な方法があるかもしれません。ちなみに、これがどのように見えるかの例です。あまり意味がないので、私の書いたコードを含めてください。

http://jsfiddle.net/M6PmM/

4

2 に答える 2

1

あなたの質問のさまざまな解釈を見るのは興味深いことです。垂直方向に配置することを考えるとき、私は Adob​​e Illustrator を思い浮かべます。選択した多数の図形を均等に配置する方法です。そのために、次のようなことができます。

注: これは、個々の高さに関係なく、要素間の均等なギャップを維持するために簡単に適応できます。

$('.align').click(function() {

    // Cache the elements
    var $obj = $('.obj');

    // Sort them by offset top
    $obj = $obj.sort(function(a, b) {
        return $(a).offset().top - $(b).offset().top;
    });

    // Get get the offset of the first and last elements
    // NOTE that we included the last element's height... you may need to tweak it
    // here due to CSS borders adding to the height
    var firstOffsetTop = $obj.first().offset().top;
    var lastOffsetTop = $obj.last().offset().top + $obj.last().height();

    // The new container height is the difference between the first,
    // and last element's position
    var containerHeight = lastOffsetTop - firstOffsetTop;

    // Determine the gap between each element, based on the height of the container
    // divided by the number of elements
    var spacing = containerHeight / $obj.length;

    // Assign top properties
    $obj.each(function(i, el) {
        $(this).css('top', (i * spacing) + firstOffsetTop + 'px');
    });

});
于 2012-08-10T06:12:47.537 に答える
0

遅くなりましたが、これは別の方法かもしれません：

$('.align').click(function(){

    var t = 0;
    var dist = 10;

    $('.obj').each(function(i,e){

        t += $('.obj').eq(i-1).height() + dist;

        $(this).animate({

            left: $('.container').offset().left + dist,
            top: t

         }, 500);

    });

});
于 2012-08-10T06:36:55.053 に答える