-1

threeというコンテナがあります。内部に「1」と「2」の 2 つの div があります。絶対位置をシャッフルしたいだけです。出来ますか？もしそうなら、 jQueryの組み込み関数はありますか?

これは私の試みですが、正しく動作しません:

HTML:

<div id='three'>
    <div id="one">1</div>
    <div id="two">2</div>
</div>

コード：

var clone1 = $('#one').clone();
var colone2 = $('#two').clone();

var clone1X = $('#two').position().left
var clone1Y = $('#two').position().top;

var clone2X = $('#one').position().left;
var clone2Y = $('#one').position().top;

$('div > div').remove();

$('div').append($(colone2).css({left:clone1X,top:clone1Y})).append($(clone1).css({left:clone2X,top:clone2Y}));

しかし、私が期待したようには機能しません。

4

2 に答える 2

1

それほど難しいことではないはずです...これがどのように進むかです。

<div id='three'>
    <div id="one">1</div>
    <div id="two">2</div>
</div>

$(function () {
    var onePos = $('#one').position();
    var twoPos = $('#two').position();

    $('#one').css({left: twoPos.left, top: twoPos.top});
    $('#two').css({left: onePos.left, top: onePos.top});
});
于 2013-01-15T17:02:19.600 に答える
0

jQuery にはそのための組み込み関数はありません。しかし、いつでも独自のものを作成できます。

(function( $ ){
    $.fn.swap = function(other,speed) {
        //Get the position
        var position1 = this.offset();
        var position2 = other.offset();

        //Position this where it is
        this.css({
            top: position1.top + 'px',
            left: position1.left + 'px',
            position: 'absolute'
        });

        //Position the other element where it is
        other.css({
            top: position2.top + 'px',
            left: position2.left + 'px',
            position: 'absolute'
        });

        this.animate({
            'top': position2.top + 'px',
            'left': position2.left + 'px'
        }, speed, function() {
            // Animation complete.
        });

        other.animate({
            'top': position1.top + 'px',
            'left': position1.left + 'px'
        }, speed, function() {
            // Animation complete.
        });
    };
})( jQuery );

この関数の使用:

$('#trigger').click(function(e) {
    $('#element1').swap($('#element2'),300);
});
于 2013-01-15T17:11:26.637 に答える