jQueryUI拖放

Question

我想拥有它，以便当我将可拖动对象（a）拖到可放置对象（b）上时，会触发b的放置事件并将a还原到其原始位置。 这可能吗？

b.droppable({
    drop:function(event,ui){
        ui.draggable.revert <---- REVERT THE DRAGGABLE OBJECT TO ORIGINAL POSITION HERE
    }
});

Answer 1

是的，请检查此JSFiddle以了解您要实现的目标。

它设置所需的还原功能：

$(function() {
    $("#draggable").draggable({ 
        revert:  function(dropped) {
           var dropped = dropped && dropped[0].id == "droppable";
           if(!dropped) alert("I'm reverting!");
           return !dropped;
        } 
    }).each(function() {
        var top = $(this).position().top;
        var left = $(this).position().left;
        $(this).data('orgTop', top);
        $(this).data('orgLeft', left);
    });

    $("#droppable").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        },
        out: function(event, ui) {
            ui.draggable.mouseup(function () {
                var top = ui.draggable.data('orgTop');
                var left = ui.draggable.data('orgLeft');
                ui.position = { top: top, left: left };
            });
        }
    });
});