jquery - jQuery - 洗牌两个绝对定位的元素

Question

我有一个叫三的容器。它内部有两个 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}));

但没有像我预期的那样工作。

Answer 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});
});

Answer 2

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);
});