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

您可以克隆可拖动元素并对克隆元素应用小样式:

SEE DEMO

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

}