jQuery drag and drop in outside div only

Question

I nearly have the solution thanks to this question: Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)

I have amended the code in jsfiddle here http://jsfiddle.net/phoebebright/jcRN7/1/ to demonstrate what I want to do showing the outside div where items are droppable and an inside div where they are not, easier to demonstrate than to explain!

How can I stop a div being dropped on a div inside a div which is droppable?

could you rephrase your question please? maybe it's just me but I didn't understand what you want to achieve. — redmoon7777, Jan 06 '12 at 00:21
have you looked at the jsfiddle example, a lot easier to show than explain! — PhoebeB, Jan 06 '12 at 00:29
my problem is I want it to stop me dropping in the red area but as the red div is on top of the grey div it is still accepting the drop. — PhoebeB, Jan 06 '12 at 00:43
this is the link you gave us: http://jsfiddle.net/9ydjY/ please check if its the right one :) — redmoon7777, Jan 06 '12 at 00:51
I've got to go now but if you edit your question with the right info somebody else will help you. — redmoon7777, Jan 06 '12 at 00:52

score 2 · Accepted Answer · answered Jan 06 '12 at 01:01

$('.drop').droppable({
    tolerance: 'fit',
});

$('.drag').draggable({
    revert: 'invalid',
    stop: function() {
        $(this).draggable('option', 'revert', 'invalid');
    }
});

$('.drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event, ui) {
        ui.draggable.draggable('option', 'revert', true);
    }
});

Try adding this:

$('#nogo').droppable({
    greedy: true,
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});

Yes! Thank you for sorting that out. (and is jsfiddle great). — PhoebeB, Jan 06 '12 at 01:14

jQuery drag and drop in outside div only

1 Answers1