jquery - 拖放后如何将可拖动对象保留在其原始位置

Question

我有一个小的可拖动/可放置的 jquery 应用程序，我无法保留可拖动项目并在其克隆被删除后将其保持在其原始位置。

有人可以帮忙吗？

http://jsfiddle.net/franco13/vLSZf/1/

谢谢你。

$(init);

function init() {

    $('.teamEmblem').draggable({
        //    containment: $('.teamEmblem').parent(), // this does not work
        cursor: 'move',
        helper: 'clone',
        obstacle: ".teamEmblem", // this does not work
        preventCollision: true, // this does not work
        revert: true
    });

    $('.winner').droppable({
        hoverClass: 'hovered',
        tolerance: 'touch',
        drop: handleCardDrop1
    });

}

function handleCardDrop1(event, ui) {

    if (true) {
        ui.draggable.addClass('correct');
        ui.draggable.draggable('disable');
        $(this).droppable('disable');
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });
        ui.draggable.draggable('option', 'revert', false);
    }

}

Answer 1

您可以克隆可拖动元素并将小样式应用于克隆元素：

看演示

function handleCardDrop1(event, ui) {
    if (true) {

        ui.draggable.addClass('correct');
        ui.draggable.draggable('disable');
        $(this).droppable('disable');

        var dragged = ui.draggable.clone(true);
        dragged.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        }).css({
            position: 'absolute',
            display: 'block',
            margin: '0 auto'
        });
        ui.draggable.draggable('option', 'revert', false);
        $('body').append(dragged);
    }

}