Jquery UI - Allow droppable to have blockable div

Question

I am unsure how to achieve what I am trying to do. I set up an example here:

$('.draggable').draggable({
    revert: 'invalid'
});
$('#droppable').droppable({
    accept: '.draggable'
});

The green box is a valid droppable. The red box is not. If the draggable is dropped on the red, even the red that is over top of the green, I want it to be invalid and revert. In the example this is not working.

Is this achievable? I have combed over the API and through other questions and have not been able to find an answer.

A. Wolff · Answer 1 · 2013-05-30T17:29:37.070

1

Could be a workaround:

http://jsfiddle.net/zs6US/4/show

http://jsfiddle.net/zs6US/4/

$('.draggable').draggable({
    revert: 'invalid'
});

$('#droppable').droppable({
    accept: '.draggable',
    drop: function (e, ui) {
        ui.draggable.hide();
        console.log(ui);
        var target = document.elementFromPoint(ui.offset.left, ui.offset.top);
        if (!target || target.id != "droppable") ui.draggable.draggable({
            revert: true
        });
        else  ui.draggable.draggable({
            revert: false
        });
        ui.draggable.show();
        }
    });

edited May 30 '13 at 17:29

answered May 30 '13 at 17:22

A. Wolff

74,033
9
94
155

After test, this is buggy but could bring you in the right way, i hope – A. Wolff May 30 '13 at 17:35
Thanks, this was on the right track. jammykam's answer is a bit cleaner and easier though. – user2437462 May 30 '13 at 19:45

jammykam · Accepted Answer · 2013-05-31T15:02:43.117

1

Just add both elements to the droppable types, and then check the element it had been dropped on. If it is block then revert.

http://jsfiddle.net/zs6US/12/

$('.draggable').draggable({
    revert: 'invalid'
});

$('#droppable, #block').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        if (this.id == 'block') {
            ui.draggable.draggable({ revert: true  });
        } else {
            ui.draggable.draggable({ revert: "invalid"});
        }
    }
});

edited May 31 '13 at 15:02

answered May 30 '13 at 17:39

jammykam

16,940
2
36
71

2

Though this is accepted answer @user2437462 there is a problem with this solution. once you Drop it on Green BOX then it is also Droppable on White Area... As ypu are making `revert: false` ..See my naswer it has solved that problem – rahul maindargi May 31 '13 at 11:13
1

@rahulmaindargi Thanks, I missed that. Code is much simpler than you posted, set `revert: "invalid"` rather than `false` (to match the original declaration). Code above updated – jammykam May 31 '13 at 15:03
If you need to allow drag out of green box then http://stackoverflow.com/a/5848800/661447 or set up another droppable to allow accept back. – jammykam May 31 '13 at 15:05
1

@jammykam if revert is simple as 'revert: "invalid"' then its ok but what if its `anonymus function` or something else.. ? my answer will take care of that too.. as i am storing the original value once ... and using it.. – rahul maindargi May 31 '13 at 15:15
Sure and good point, but it depends on the OP's requirements. Why over-engineer things? You could just as easily declare `var revertDraggable = function(){}` and set that to `revert` http://jsfiddle.net/zs6US/13/ Just my personal preference since it reads easier IMO – jammykam May 31 '13 at 15:25
1

Thanks for pointing out that issue and thanks for fixing it. As of right I am just using "invalid" so this solution works for me, but this discussion will be helpful if that changes in the future. – user2437462 May 31 '13 at 15:59

rahul maindargi · Answer 3 · 2013-05-31T11:27:42.733

Accepted solution is cleaner but has 1 problem. Once draggable is Dropped over Green Area, it will beocome Droppable even on white Area... (Note revert: false) Updates to that answer with correct code.

DEMO2

$('.draggable').draggable({
    revert: 'invalid'
});

$('#droppable, #block').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        if(!ui.draggable.data('original')){
            ui.draggable.data('original',ui.draggable.draggable("option", "revert"));
        }
        if (this.id == 'block') {
            ui.draggable.draggable({ revert: true  });
        } else {
            ui.draggable.draggable({ revert: ui.draggable.data('original')  });
        }
    }
});

Looks like this question already has answer. but here is my attempt to solve same problem.

DEMO

$('#block').droppable({
    accept: '.draggable',
    drop: function (event, ui) {
        if (ui.draggable.data('revert')) {
            ui.draggable.data('revert', false);
            var old = ui.draggable.draggable("option", "revert");
            ui.draggable.draggable("option", "revert", true);
            setTimeout(function () {
               ui.draggable.draggable("option", "revert", old);
            }, 100);
        }
    },
    out: function (event) {
        $('.draggable').data('revert', false);
    },
    over: function (event,ui) {
       ui.draggable.data('revert', true);
    }
});

$('#droppable').droppable({
    accept: function (elem) {
      if ($('.draggable').data('revert')) {
            return false;
        }
        return elem.hasClass("draggable");
    }
});

$('.draggable').draggable({
    revert: 'invalid'
});

Jquery UI - Allow droppable to have blockable div

3 Answers3