jquery ui revert dropped draggable on cancel modal

Question

I have this code that activates the jquery draggable in a management system files when I release a file on another pops up a confirmation dialog when I click cancel the draggable should automatically revert, can someone help me?

$(function() {
    $('.files-icons li').live('mouseenter',function() {
        var $this = $(this);
        if(!$this.is(':data(draggable)')) {
            $this.draggable({
                revert: 'invalid',
                helper: "original",
                opacity: 0.35,
                snapMode: 'inner',
                snap:true,
                snapTolerance: 35,
                distance: 8,
                revertDuration: 200,
                start: function(){

                }
            });
        }
    });
    $('.ic').live('mouseenter',function() {
        var $this = $(this);
        if(!$this.is(':data(droppable)')) {
            $this.droppable({
                tolerance: 'intersect',
                over: function() {
                },
                out: function() {
                },
                drop: function(event, ui) {
                    dest = $(this).attr('rel');
                    $.modal.confirm('Are u sure?', function()
                    {
                        $.ajax({
                            url:'<?= $this->request->webroot; ?>files/move/source:' + ui.helper.attr('rel')  + '/dest:' + dest ,
                        }).done(function(data) {
                            $(ui.draggable).remove();
                        });
                    }, function() {
                        return false;
                    });

                }
            });
        }
    });


});

the problem is, u put the confirm inside the drop, so when u release it you already dropped the item. Take a look here: http://stackoverflow.com/questions/5735270/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of — Lefsler, Jan 24 '13 at 12:44

score 3 · Accepted Answer · answered Jan 21 '13 at 20:51

If you are using clone as draggable helper you should be able to append to droppable when confirmed, or do nothing when not confirmed.

DEMO using native browser confirm: http://jsfiddle.net/WbHAr/1/

Post a link to modal plugin you are using and will create demo from it.

jquery ui revert dropped draggable on cancel modal

1 Answers1