0

I'm using jquery ui drag and drop widgets for my application, and I'm facing some difficulties here.

On my droppable element, I fire a success message whenever a draggable is dropped on a droppable element using the drop option.

Now, I want to fire an error message whenever a draggable element is rejected by a droppable one. I inserted the code for that to the accept option (which is a function in this case), but the problem is that the accept function runs every time I go over a droppable element, and I want the message to be fired only when I drop the draggable element and it's rejected.

$slots.droppable({
    accept: function(draggable) {
        var valid = true;

        if (!draggable.hasClass('draggable')) {
            valid = false;
        }

        var _date = $(this).data('date');
        var $thisDateSlots = $('.sort-panel-body-day-body-slot[data-date="' + _date + '"]');

        $.each($thisDateSlots, function() {
            if ($(this).data('item') == draggable.data('id')) {
                console.log($(this).data('item'), draggable.data('id'));
                valid = false;
            }
        });

        return valid;
    },
    drop: function(event, ui) {
        var dropped = ui.draggable;

        dropped.data('slot', $(this).data('slot'));
        dropped.data('date', $(this).data('date'));

        stickToSlot(dropped, $(this).data('date'), $(this).data('slot'));

        $(this).data('item', dropped.data('id'));
        $(this).addClass('filled');
        $(this).droppable('disable');
        toastr.success('added successfuly');
        initSlots();
    },
    out: function(event, ui) {
        $(this).data('item', '');
        $(this).removeClass('filled');
        $(this).droppable('enable');
    }
});

Any solutions for this?

Naxon
  • 1,354
  • 4
  • 20
  • 40
  • Insert your code to check if we can help you, why you don't use any of drag-drop jquery plugin? – AnasSafi Aug 18 '16 at 14:21
  • I'm using the jquery-ui built-in feature... – Naxon Aug 18 '16 at 14:21
  • Try fot cancel method – AB Udhay Aug 18 '16 at 14:27
  • You can't do this out-of-the-box on the droppable, but you can on the draggable. You can add a check in either the `revert` option or `stop` event (depending on whether you do a revert or not). Related question: http://stackoverflow.com/questions/8092771/jquery-drag-and-drop-checking-for-a-drop-outside-a-droppable Could you make a [mcve]? – blgt Aug 18 '16 at 15:33

0 Answers0