Question

我有一个名为three的容器。它有两个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);
});

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

HTML：

代码：

2 个答案: