// 将#element1移动到#container的末尾
$('#element1').appendTo('#container');

// 等价写法
$('#container').append($('#element1'));

// 将#element1移动到#container的开头
$('#element1').prependTo('#container');

// 等价写法
$('#container').prepend($('#element1'));

// 将#element1移动到#element2之前
$('#element1').insertBefore('#element2');

// 等价写法
$('#element2').before($('#element1'));

// 将#element1移动到#element2之后
$('#element1').insertAfter('#element2');

// 等价写法
$('#element2').after($('#element1'));

var element = $('#element1').detach(); // 从DOM中移除但不删除
$('#container').append(element); // 重新插入到新位置

// 上移列表项
$('.move-up').click(function() {
    var item = $(this).closest('li');
    item.insertBefore(item.prev());
});

// 下移列表项
$('.move-down').click(function() {
    var item = $(this).closest('li');
    item.insertAfter(item.next());
});

$('#sortable-list').sortable({
    update: function(event, ui) {
        // 排序变化后的回调
        console.log('新顺序:', $(this).sortable('toArray'));
    }
});

$('#move-button').click(function() {
    $('#element').animate({
        left: '+=100px',
        top: '+=50px'
    }, 500);
});