I have an element I want to allow to be dragged anywhere. However, if it is dropped onto a droppable which refuses it (via accept) I want it to revert to the original position before the drag. How can I acplish this?

EDIT: to be more specific: I want two conditions to be met in order for the item to be moved back: 1. It was dropped on a droppable and 2. The droppable didnt accept said item. Draggable's revert option only checks condition 2.

I have an element I want to allow to be dragged anywhere. However, if it is dropped onto a droppable which refuses it (via accept) I want it to revert to the original position before the drag. How can I acplish this?

EDIT: to be more specific: I want two conditions to be met in order for the item to be moved back: 1. It was dropped on a droppable and 2. The droppable didnt accept said item. Draggable's revert option only checks condition 2.

• javascript
• jquery
• jquery-ui

2 Answers 2

I have some code which I think should work. Note that it doesn't use the accept option to specify which draggables the droppables will accept. Instead, you'll have to check whether or not a draggable should be rejected manually, in the drop event.

$(document).ready(function() {
    $('.droppable-class').droppable({
        drop: function(event, ui) {
            // check whether or not draggable should be rejected here...
            if (...) {
                ui.draggable.data('rejected', true);
            }
        }
    });

    $('.draggable-class').draggable({
        revert: false,
        start: function(event, ui) {
            ui.helper.data('rejected', false);
            ui.helper.data('original-position', ui.helper.offset());
        },
        stop: function(event, ui) {
            if (ui.helper.data('rejected') === true) {
                ui.helper.offset(ui.helper.data('original-position'));
            }
        }
     });

You want to use sortable dude - something like:

    $('#sortable-area').sortable({
    accept: '.child',
    items: '.child',
    revert: 300,
    opacity: 0.8,
    containment: 'document'
});

This should automatically snap the element back if it isn't far enough to replace one of the other elements. You just put this on the container